[NextJs] next.config.js 의 redirects와 rewrites

nextJs에서 자동으로 생성되는 파일 중 next.config.js 가 있다.

이 파일에서는 redirects와 rewrites 를 작성할 수 있다.

 

redirects

React에서 Router 작성 시 사용했던 Navigate 태그와 유사하다고 생각된다.

Source URL을 원하는 Destination URL로 간단하게 Redirect 할 수 있다.

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        // source로 이동하면 destination으로 가도록
        source: "/about/*",
        destination: "/",
        permanent: false,
      },
      {
        // token이 false일 때 "/"로 이동하면 "/login"으로 가도록
        source: "/",
        destination: "/login",
        permanent: true,
        has: [
          {
            type: "cookie",
            key: "token",
            value: "false",
          },
        ],
      },
    ];
  },

};
module.exports = nextConfig;

rewrites

api path 및 api key를 은닉화 할 수 있는 기능이다.

redirects와 마찬가지로 source와 destination 을 필수 옵션으로 한다.

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async redirects() { ... },
 
  async rewrites() {
    return [
      {
        source: "/api/dataList",
        destination: `https://urlToGetData?api_key=${API_KEY}`,
      },
      // path parameter
      {
        source: "/api/dataWithId/:id",
        destination: `https://urlToGetData/:id?api_key=${API_KEY}`,
      },
      // query string parameter
      {
        source: "/api/dataWithKeyword/:keyword",
        destination: `https://urlToGetData/withKeyword?api_key=${API_KEY}&keyword=:keyword`,
      },
    ];
  },
};
module.exports = nextConfig;

 

호출 방법

- 별도의 import 없이 지정한 source로 api 를 요청할 수 있다.

  const result = await (
    await fetch(`http://localhost:3000/api/dataWithId/${id}`)
  ).json();