NextJS에서 Proxy 설정하기

목차

· React에서의 Proxy 설정

· NextJS에서의 Proxy 설정

---

React에서의 Proxy 설정

CRA 형태의 React 프로젝트에서는 Package.json 파일에 아래와 같이 코드 한줄을 삽입해주면 서버와의 통신이 가능했다.

"proxy" : "http://localhost:8080"

설정한 주소는 통신하고자 하는 백엔드 서버의 주소로, 위의 예제에 따라 사용자가 통신하고자 하는 주소로 유동적으로 변경해 사용이 가능하다. 나 같은 경우 스프링부트 서버를 로컬 환경에서 같이 실행시켜주고 있었기 때문에 위와 같은 예제를 작성하였다. 하지만 NextJS 프로젝트에서는 Packge.json을 수정해줘도 서버와의 통신이 실패했고, 404 에러가 계속해서 발생하고 있었다. Package.json을 수정해줬는데 요청 URL이 내가 원하는 URL과 다르게 요청되고 있었고, NextJS에서 관련 환경설정을 다르게 해줘야된다는 사실을 알게 되었다.

NextJS에서의 Proxy 설정

NextJS에서 proxy 설정을 진행하려면 아래와 같은 코드를 작성해주면 간단하게 끝낼 수 있다. 아래의 내용으로 next.config.js 파일을 수정해준다면, proxy를 통해 CORS 정책을 우회하여 서버와 통신을 진행할 수 있다.

module.exports = {
	rewrites = () => {
		return [
        	{
        	source: '/:path*',
            destination: 'http://localhost:8080/:path*',
        	}
        ]
    }
}