next.config의 redirects / rewrties에 대해 알아보자

next 프로젝트를 만들면 next.config.js 파일을 같이 만들곤한다.

이 파일에서 쓰는 설정만 쓰고, 다른 설정에 대해서 잘 모르기 때문에 next.config.js 파일에 대해 자세하게 파헤쳐보고자 한다.

nextjs에서 환경설정을 하고, 커스텀한 설정을 할 수 있다.

개발을 하다보면, 개발환경과 배포환경인 프로덕션 환경으로 구분할 수 있따.

배포환경과 개발환경이 다르듯 환경설정을 다르게 한다.

이 부분을 next 사용자라면, next.config.js에서 쉽게 설정할 수 있다.

const nextConfig = {}

module.exports = nextConfig

또는

const nextConfig = {}

export default nextConfig

를 이용하여 설정을 커스텀한 파일을 exports할 수 있다.

nextConfig로 커스텀할 수 있는 설정으로는

output, generateBuildId, experimental, optimizeFonts, compress, productionBrowserSourceMaps, amp, basePath, assetPrefix, images, swcMinify, compiler, reactStrictMode, poweredByHeader, eslint, async header, rewrites, redirectio 등등이 있다.

next.config.js에서 직접 사용해보면서 제일 좋다고 느꼈던

redirects, rewrites에 대해서 알아보고자 한다.

redirects를 사용하게 되면 들어온 요청 경로의 패턴이 맞을 때, 해당하는 다른 경로로 리다이렉션을 처리해준다.

즉, 페이지가 이동하는 것이다.

rewrites도 redirects와 유사하지만, 페이지 이동이아닌,destincation의 주소로 요청이다.

즉 api의 엔드포인트로 요청을 하는 것이다.

우리는 axios같은 것으로 데이터를 fetch할 때, 네트워크 탭을 보면 api의 endpoint가 노출되곤한다.

요청 주소와, 실제 요청 주소가 분리하게 되어 민감한 데이터가 포함된 get방식이라면 제거가 가능하다.

async rewrites() {
    const proxy = [
      // API 서버 별칭
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_SERVER}:path*`,
      },
      { source: '/api2/:path*', destination: `${process.env.NEXT_PUBLIC_API_SERVER_V2}slack/:path*` },
    ];

위와 같이 api로 시작하는 api는 env파일의 NEXT_PUBLIC_API_SERVER가 엔드포인트로,

api2로 시작하는 api는 env파일의 NEXT_PUBLIC_API_SERVER_V2가 엔드포인트로 찔릴 수 있다.

 

[참고자료]

https://nextjs.org/docs/pages/api-reference/next-config-js

https://jake-seo-dev.tistory.com/151