🔗 연관된 이슈

• close Proxy 설정 #147

🗒 작업 목록

• proxy 설정

🧐 PR Point

• CORS 에러 해결을 위한 proxy 설정을 했습니다.
• Next.js의 rewrites 기능을 이용하여 적용
  • 주의 사항: next-auth를 사용하고 있다면 source: '/api/:path*' 라고 작성 시 에러가 발생합니다. next-auth에서 '/api' path를 통해 로그인 과정이 진행되므로 이와 같이 작성할 경우, 백엔드 api는 정상적으로 동작하지만 next-auth가 제대로 동작하지 않습니다.

/* next.config.js */
// Bad - next-auth 사용 시
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://34.64.81.235:5000/:path*',
      },
    ];
  },

// Good - 현재 적용된 코드
  async rewrites() {
    return [
      {
        source: '/api/v1/:path*',
        destination: 'http://34.64.81.235:5000/:path*',
      },
    ];
  },

• 따라서 axios default 설정의 baseUrl도 source와 동일하게 적용

💥 Trouble Shooting

• next-auth와 react-query SSR의 경우, api url이 proxy 설정을 한 path가 아닌 실제 api url을 적용해야 정상적인 동작을 합니다.

Caveat for Next.js rewrites
만일 Next.js의 rewrites 기능과 함께 Automatic Static Optimization이나 getStaticProps를 쓸 경우 함정이 있는데, React Query에 의한 두번째 hydration을 발생시킬 수 있다. Next.js가 클라이언트에서 rewrites를 파싱하고 hydration 후 매개변수를 수집하여 router.query에 제공할 수 있도록 해야 하기 때문이다.

⇒ 아직 해결하지 못해서 드래프트로 내용 공유합니다.

📸 스크린샷 / 피그마 링크

• 내용을 입력해주세요.

📚 참고

• rewrites
• Caveat for Next.js rewrites

✅ PR Submit 전 체크리스트

• [] Merge 하는 브랜치는 main 브랜치가 아닙니다.
• [] 코드에 크리티컬한 error 또는 warning이 존재하지 않습니다.
• [] 불필요한 console이 존재하지 않습니다.