[Next.js] Redirect and Rewrite

Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다.

 

Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다.

next.config.js

Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있습니다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않습니다.

Redirects (URL변경됨)

Redirect을 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect 할 수 있습니다. Redirect을 사용하려면 next.config.js에서 redirects 키를 설정합니다.

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/contact',
        destination: '/form',
        permanent: false,
      },
    ];
  },
};
module.exports = nextConfig;

redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수입니다.

• source: 들어오는 request 경로 (request 경로)
• destination: 라우팅 하려는 경로 (redirect 할 경로)
• permanent: true 인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache 하도록 지시하는 308 status code를 사용하고, false 인 경우 일시적이고 cache 되지 않은 307 status code 를 사용합니다.

request 경로에 요청되는 모든 쿼리 값도 destination 으로 전달됩니다.

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/old-blog/:path*',
        destination: '/blog/:path*',
        permanent: false,
      },
    ];
  },
};
module.exports = nextConfig;

예를 들어 /old-blog/post-1?hello=world 요청이 들어오면 /blog/post-1?hello=world 경로로 Redirect 됩니다.

Rewrites (URL변경되지 않음)

Rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있습니다.

Rewrites은 URL 프록시 역할을 하고 destination 경로를 mask 하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 합니다. 반대로 redirects은 새 페이지로 reroute 되고 URL 변경 사항을 표시합니다.

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/api/movies',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};
module.exports = nextConfig;

// 사용
const { results } = await (await fetch(`/api/movies`)).json();

API를 통해 데이터를 조회할 때 API Key가 필요한 경우가 있습니다. 그럴 경우 API Key가 노출되어 위험할 수 있습니다. 위의 내용처럼 Rewrites를 사용하여 API 주소로 매핑을 하여 노출되지 않도록 해결하였습니다.

참고

• https://nextjs.org/docs/api-reference/next.config.js/introduction
• https://nextjs.org/docs/api-reference/next.config.js/redirects
• https://nextjs.org/docs/api-reference/next.config.js/rewrites