[nextjs] next.config.js 내부의 Rewrite 적용

nextjs 버전이 올라가면서 유용한 기능들이 많이 생겨나고 있다. 여기서 사용해볼 Rewrite에 대해 알아보자. 원리는 간단하다. 나는 /api/hanpy로 들어오는 요청을 처리하는 API를 만들었다. 그런데, /hanpy로 들어오는 요청도 /api/hanpy의 로직을 따르게 만들고 싶은 경우가 있을 것이다. 이때 사용하는 것이 Rewrite이다. 

 

 

 

 

0. 사용 준비

 

npx를 통해 프로젝트 하나를 생성하자.

 

$ npx create-next-app@latest

 

 

1. rewrite 설정하기

 

npx를 통해 프로젝트 하나를 생성하자. 위와 같이 프로젝트를 만들면, 기본 next.config.js는 아래와 같다.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

 

 

기본 rewrite 시키기

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/abc',
        destination: '/'
      }
    ]
  }
}

module.exports = nextConfig

 

위의 코드에 대한 설명은 /abc로 접근하면, 화면은 /을 보여주라는 이야기 이다. 아래와 같이 접속을 해도, 보여지는 것은 / 페이지가 보여진다.

 

 

 

여기서 궁금한것은 만약 내가 /abc라는 페이지가 존재하는 경우에도 rewrite가 될까에 대한 궁금증이다. 아래의 예시를 보자.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/rewrite/RewriteTest1',
        destination: '/'
      },
      {
        source: '/rewrite/RewriteTest3',
        destination: '/'
      }
    ]
  }
}

module.exports = nextConfig

 

'/'와 '/rewrite/RewriteTest1' 은 존재하는 페이지이고, '/rewrite/RewriteTest3'은 만들지 않은 페이지 이다. 파일구조는 아래와 같다.

 

 

/rewrite/RewriteTest1 로 접속을 한 경우에는 rewrite가 되지 않고, /rewrite/RewriteTest1 페이지가 보인다. 그러나 /rewrite/RewriteTest3의 경우는 '/'로 rewrite 되는 것을 확인 할 수 있다. 정리하면, 기존에 페이지가 존재한다면, rewrite는 되지 않는다.

 

 

 

 

 

2. :path*

:path*는 뒤에 붙는 모든 것을 다 포함하는 의미이다. 아래의 예시를 보자.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/abc/:path*',
        destination: '/'
      },
    ]
  }
}

module.exports = nextConfig

위와 같이 적으면 /abc, /abc/aa, /abc/dskfjwe 등등 모두가 다 '/'로 rewrite 된다.

 

 

3. 심화

위의 내용만으로도 간단한 프로젝트는 rewrite가 가능하다. 조금 더 심화 부분은 위의 기본적인 개념을 이해하고 아래의 공식문서를 참고해서 필요한 내용을 찾아보면된다.

 

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

next.config.js: Rewrites | Next.js