next.js 의 proxy

Next.js 에서 proxy 기능을 제공한다. 조사해 본 바에 의하면 가장 대표적인 설정방법은 api router 와 rewrites 기능이다.

api Router

pages/api 디렉토리에서 app 의 endpoint 생성
프론트 코드에 pages/api/new-api 라는 파일이 있으면 브라우저에서 https://domain.com/api/new-api 로 요청을 보낼 수 있다. 이 주소는 next 서버가 처리해준다. (서버에만 번들링 됨)

import type { NextApiRequest, NextApiResponse } from 'next'
 
type ResponseData = {
  message: string
}
 
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

Rewrites

rewrites : next.config.js 파일에 rewrite 설정을 하면 입력된 주소를 설정된 주소로 매핑해준다.

redirect 는 입력된 주소 변경을 하여 다른주소로 변경한다.

/* about 으로 들어온 주소를 / 로 변경한다. */

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

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