[Next.js] proxy 설정하는 법

React에서는 CORS 오류를 피하기 위해서 package.json에 proxy를 추가해주거나, 혹은 웹팩 설정파일을 수정해야 했다.

그러나 Next.js에서는 Next.config.js 파일에 rewrites를 추가해주면 된다.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/api/:path*',//api request path
        destination: 'http://localhost:8080/api/:path*',//목적 path
      },
    ]
  },
}

module.exports = nextConfig

 

백엔드인 스프링부트에서 설정할 수도 있기는 하지만 프론트 단에서 설정하는 것보단 복잡한 편.

(추후 추가)