Next.js url 요청 경로 마스킹 처리

Next.js 공식문서

이미지 URL등을 받아오면 해당 경로가 적나라하게 나올 때가 있다.
혹시나 민감한 정보가 포함되어있을 경우, 보안과 직결되기 때문에 URL 마스킹 처리는 해주면 아주아주아주 좋다.

// next.config.mjs (next.js 14.2.1)

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/upload/:slug",
        destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination
      },
    ];
  },
};

export default nextConfig;

• source : 클라이언트 측에서 접근할 때 보이는 URL 패턴. string 값만 들어올 수 있음.
• destination : 클라이언트가 보낸 요청이 최종적으로 서버 측에서 처리될 경로. 사용자가 URL을 통해 직접적으로 알 수 없는 경로. 해당 경로로 rewrite되어 서버측에서 처리한다.
  string 값만 들어올 수 있음.

우리에게 보이는건 source에 있는 경로.
실제로 서버측에서는 destination에 있는 경로로 요청한다는 것.

Q. 왜 destinstaion에 있는 경로로 요청하는 건가요?

A. rewrite를 설정하게되면 Next.js는 특정 경로에 대한 API 요청을 다른 경로로 내부적으로 재매핑한다. 해당 기능을 사용하면 클라이언트 측 URL 구조를 유지하되, 서버 측으로는 다른 경로로 URL 요청을 시도한다.

---

API 요청과 URL 요청은 같은가요?

다르다.

URL 요청

• URL 요청은 브라우저나 클라이언트가 특정 리소스를 요청하는 모든 요청을 말함.
• 웹 페이지 및 이미지, CSS 파일, Javascript 파일 등 모든 유형의 리소스 요청이 URL 요청에 해당한다.

예시 : 사용자가 브라우저 주소창에 https://musinsa.com/home 을 입력하여 웹 페이지를 요청하는 경우가 URL 요청에 해당함.

API 요청

• API 요청은 클라이언트가 서버의 특정 엔드포인트에 데이터나 기능을 요청하는 것임.
• 과거엔 Ajax 요청, 요즘은 fetch 함수나 axios 등을 사용하여 비동기적으로 수행.
• API는 JSON, XML 등의 형식으로 데이터를 주고받는다.

예시 : 클라이언트가 https://musinsa.com/api/user 엔드포인트로 유저 정보 데이터를 요청하는 경우

---

rewrite()는 URL 마스킹을 하는 데에 굉장히 유용하다.

---

결과