[NextJS] redirects와 rewrites

next.config.js

• json파일이 아닌, Node.js 모듈이다.

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

• next.config.js에서 redirects와 rewrites를 설정할 수 있다.

redirects

• 주소를 source로 가면 destination 주소로 리다이렉트 시킴
• source, destination, permanent 속성이 있는 object를 포함하는 "배열"이 반환될 것으로 예상하는 비동기 함수 다.

📍 코드예제
: url에 old-blog를 입력하면 new-blog로 주소가 변경됨

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-blog/:path*",
        permanent: false,
      },
    ];
  },
};

rewrites

• api요청 주소를 source로 요청하면 destination 경로로 바꿔서 요청하게 됨.

• redirects와 반대로 url의 변화가 유저에게 보여지진 않음.
  따라서 api key를 감추며 api요청할 수 있음.

• source, destination, basePath 등의 속성이 있는 object를 보유하는 "배열"이 반환될 것으로 예상하는 비동기 함수 다.

📍 코드예제
: api get요청 url을 "/api/movies"로 입력하면, destination주소로 요청이 됨.
따라서 API_KEY를 url주소상에서 감출 수 있음.

// <next.config.js>
const API_KEY = process.env.API_KEY;

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

// <HOME 컨텐츠 컴포넌트 - api요청 코드>
  useEffect(() => {
    (async () => {
      // api key를 감추기 위해 rewrites를 사용함.
      // 가짜 fetching url주소를 만들어 사용할 수 있게 됨.
      const { results } = await (await fetch("/api/movies")).json();

      setMovies(results);
    })();
  }, []);