Next.js 13 - Redirects, Rewrites, Middleware, .env

1. Redirects

삭제된 페이지, 존재하지 않는 페이지일 경우 지정한 경로로 리다이렉트 시킴

next.config.js에서 설정함

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
  async redirects() {
    return [
      {
        source: "/products/deleted_forever",
        destination: "/products",
        permanent: true, //search engine에게 현재 페이지는 존재하지 않는다고 알려줌 -> 캐싱
      },
      {
        source: "/products/deleted_temp",
        destination: "/products",
        permanent: false, //search engine에게 현재 페이지는 존재하지 않는다고 알려줌 -> 캐싱
      },
    ];
  },
};

module.exports = nextConfig;

프로젝트 도중 경로를 바꿨을 때 기존 사용자들에게 새로운 경로로 리다이렉트 시킬 때 사용함 (예전경로를 최신경로로 혼란스럽지 않게  알아서 바꿈!)

 

 

혹은 error시에 원하는 곳으로 redirect 시키는 것도 가능하다.

//SSR
export default async function PostPage({ params: { post } }: Props) {
  const product = await getProduct(post);
  if (!product) {
    // notFound();
    redirect("/products");
  }
  return <h1>{product.name} 설명 페이지</h1>;
}

 

 

 

2. Rewrites

복잡한 url 경로를 일일이 노출하지 않고 원하는 간단한 경로로 덮어씌워줌.

프로젝트 파일 경로가 보이기 때문에 꼭 사용해야할듯

 

async rewrites() {
    return [
      {
        source: "/:user",
        destination: "/about/me/:user",
      },
    ];
  },

 

 

 

- 원하는 페이지로 이동하는 버튼을 만들고 싶을때 (버튼 등 이벤트 처리- 클라이언트)

"use client";

import { useRouter } from "next/navigation";

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

 

 

 

3.  middleware

 

import { NextRequest, NextResponse } from "next/server";

export default function middleware(request: NextRequest) {
  console.log("미들웨어 실행중");
  if (request.nextUrl.pathname.startsWith("/products/1004")) {
    console.log("미들웨어 - 경로 리다이렉팅");
    return NextResponse.redirect(new URL("/products", request.url)); //인자 url, baseurl,
  }
}

전체 페이지에 대해 특정 함수를 실행하여 리퀘스트 요청을 핸들링함. 

전체 페이지에 할 경우 성능에 영향을 줄 수 있기 때문에 config로 원하는 페이지만 설정할 수 있다.

 

 

import { NextRequest, NextResponse } from "next/server";

export default function middleware(request: NextRequest) {
  console.log("미들웨어 실행중");
  if (request.nextUrl.pathname.startsWith("/products/1004")) {
    console.log("미들웨어 - 경로 리다이렉팅");
    return NextResponse.redirect(new URL("/products", request.url)); //인자 url, baseurl,
  }
}

export const config = {
  matcher: ["/products/:path+"], //products/shirt 등 제품 소개에서만 실행됨
};

 

 

4. .env

key를 저장하기 전에 서버 혹은 브라우저 중 어떤 곳에서 사용하는지 결정해야함

 

 

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js

 

서버에서 사용

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

 

 

브라우저에서 사용 (client component)

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

 

.env*.local should be added to .gitignore