Next.JS config 다뤄보기

📖 next.config.js 란?

NextJS에서 커스텀 설정을 하기 위해선 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있다.
이는 JSON 파일이 아닌 Node.js 모듈이다.
NextJS 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다.

📌 Redirects
Redirects는 URL을 변경한다!
Redirect는 source, destination, permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수이다.
Redirect는 새로운 페이지로 re-route 되고 URL 변경 사항을 표시한다.

📌 Rewrites
Redirects는 URL을 변경하지 않는다!
Rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있다.
Rewrites는 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것 처럼 보이게 한다.

source : 들어오는 경로 패턴 (request path)
destination : 라우팅 경로 (redirect path)
permanent :
true - Search Engine, Client에 redirect를 영구적으로 Cache 할 수 있는 308 Status Code를 사용
false - 일시적, cache 되지 않는 307 Status Code를 사용

Rewrites로 API 숨기기

.env

API_KEY = "12345678910"

next.config.js

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.com/movie?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

index.js

  useEffect(() => {
    (async () => {
       //fetch에는 경로로 대체
      const { results } = await (await fetch(`/api/movies`)).json();
      setMovies(results);
    })();
  }, []);

Redirects 예시

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  
async redirects() {
  return [
    {
      source: "/old-page/:path", //request url
      destination: "/new-page/:path", //URL이 변경되며 이동
      permanent: false,
    },
  ];
 },
};  

module.exports = nextConfig;

⭐️ 참고 ⭐️
https://nextjs.org/docs/api-reference/next.config.js/rewrites
https://nextjs.org/docs/api-reference/next.config.js/redirects
노마드코더 NextJS 무료 강의