NextJS 공부 - 3(rewrite, redirect)

NextJS 세번째 공부중입니다..!!

React에 많이 익숙할 수록 이건 완전 신세계 일 것 같은데!!
아직은 조금 덜 익숙해서, 같이 공부하느라 빡셉니다!! 그래도 열공..!!

오늘은 rewrite, redirect 인데요. 대부분 이런 기능은 webserver에서 제공을 하는데, NextJS는 세상에.. 자체적으로 제공을 하는군요.

react의 경우 Front-end도 webserver을 돌리기 때문에 가능한 부분이긴 하지만, framework 내부에 이렇게 심어둘줄이야....

암튼 한번 알아봅니다.

redirect

• async redirects 으로 설정을 해주면 사용가능합니다.
• source 부분은 url로 접근하는 주소이고
• destination 은 source로 접근해오는 경우 이 주소로 변경을 해줍니다.
• 배열이기 때문에 여러번 설정도 가능합니다.
• ex) /old-path/:path => /new-path/:path (:path부분은 기존과 동일한 값으로 유지됩니다.)
• ex) /old-path/:path* => /new-path/:path* (* 까지 사용해주는 경우 뒷부분 모두를 반영합니다.)

// next.config.js 파일에 작성을 해줍니다

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-path/:path*",
        destination: "/new-path/:path*",
        permanent: false,
      },
      {
        source: "/before-path",
        destination: "/after-path",
        permanent: false,
      },
    ];
  }
};

module.exports = nextConfig;

rewrite

• rewrite는 주소에 입력되는 부분과 실제로 호출하는 url이 다릅니다.
• redirect와 같은 level에 입력을 해줍니다.
• source 값으로 호출을 하면 내부적으로는 destination 값을 호출합니다.
• 이렇게 사용하는 경우 APIKEY 값처럼 숨겨야 하는 값이 URL에 있을 경우 실제 request url을 숨기고 가짜 url로 역할을 대신 할 수 있도록 개발이 가능합니다..!!

async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
      },
    ];
  },

webserver에서 주로 해주던 설정이 이렇게 내부적으로 되는것은 다시 생각해도 신기하네요.

앞으로 이런 저런 상황에 정말 자주 사용 될 것 같은 그런 기능입니다!!

NextJS 짱!!