Next.js ReWrite사용법

import axios from "axios";

const api = axios.create({
  baseURL: "어쩌구저쩌구백엔드url",
  timeout: 3000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

기존 코드이다.

Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!!

/** @type {import('next').NextConfig} */
const nextConfig = {
  
  async rewrites() {
    return [
      {
        source: "/api",
        destination:
          "어쩌구저쩌구백엔드url", // 프록시될 경로와 포트를 명시
      },
    ];
  },

};

module.exports = nextConfig;

사용 방법은 너무 간단하다!!
next.config.js파일에서 API 요청을 백엔드 서버로 프록시 하는 rewrites() 를 설정해주면 된다!
바꿀 주소와 포트를 destination에 넣고, 

source에 있는 주소를 사용해주면 된다!!!

이렇게 수정하면 API 를 사용하는 파일에서 '/api/엔드포인트' 이렇게 요청 경로를 입력하면 된다!!

import axios from "axios";

const api = axios.create({
  baseURL: "/api",
  timeout: 3000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

그래서 바뀐 코드는 이렇게 된다!!!!