ProgrammingFrontendNext.js

[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 모듈입니다.

1
2
3
4
5
6
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

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

Redirects (URL변경됨)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 으로 전달됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
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 변경 사항을 표시합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
1
2
// 사용
const { results } = await (await fetch(`/api/movies`)).json();

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

참고

Share