Redirect & Rewrite

[MinJeung-Kim]

↩️Redirect

• 페이지가 삭제 또는 다른 페이지로 옮겨간 경우.
• 로그인 해야 볼수 있는 페이지에 로그인 없이 왔다면 로그인 페이지로 이동.
• next.config.js 에서 설정.
• 예전에 사용했던 경로를 최신으로 Redirect해줄 때 사용.

  
  /** @type {import('next').NextConfig} */
  const nextConfig = { 
  async redirects() {
  return [
    {
      // 영원히 삭제된 페이지 접근시.
      source: "/products/deleted_forever",
      // products페이지로 이동.
      destination: "/products",
      // status : 308
      permanent: true,
    },
    {
      // 임시 삭제된 페이지 접근시.
      source: "/products/deleted_temp",
      destination: "/products",
      permanent: false,
    },
  ];
  },
  };

module.exports = nextConfig;

### 동적 Redirect 
- Server Component
```ts
import { redirect } from "next/navigation";

export default async function ProductPage({ params: { slug } }: Props) {
  const product = await getProduct(slug);

  if (!product) {
    redirect("/products");
  }

  return ...

• Client Component

  
  // app/products/[slug]/page.tsx
  import GoProductsButton from "@/components/GoProductsButton"; 

export default async function ProductPage({ params: { slug } }: Props) { ... return ( <>

{product?.name} 제품 설명 페이지

  <GoProductsButton />
</>

); }

```ts
// app/components/GoProductsButton.tsx
"use client"; 
import { useRouter } from "next/navigation";

export default function GoProductsButton() {
  const router = useRouter();
  return (
    <button
      onClick={() => {
        router.push("/products");
      }}
    >
      제품 페이지로 이동
    </button>
  );
}

[MinJeung-Kim]

✒️ Rewrite

• 내부적으로 복잡하고, 보안상 민감한 Key가 있는 URL이 있다면 외부에 공개되면 사용자가 볼 수 있음.
• 프로젝트 구조 노출 위험.
• 일일히 타이핑하기 귀찮을때 다른 것으로 대체 가능.
• next.config.js 에서 설정.

  $ npm run dev // 재시작

  
  /** @type {import('next').NextConfig} */
  const nextConfig = { 
  async rewrites() {
  return [
    {
      source: "/roxie",
      destination: "/about/me/roxie",
    },
    {
      source: "/items/:slug",
      destination: "/products/:slug",
    },
  ];
  },
  };

module.exports = nextConfig;

![chrome_wxYYSCJLtR](https://github.com/MinJeung-Kim/NextJS-v13--Study/assets/79193369/e8ff733c-0853-41a8-ad28-bb7de4231e98)