NextJS - redirects, rewrites 설정하기(요청url 마스킹, next.config.js설정)

NextJS의 강력한 기능 중 하나인 redirects, rewrites에 대해 정리하고자 합니다.

 

Rest API형태로 데이터를 가져올 때 제공받은 api가 GET형식이고 url자체에 민감한 데이터가 존재한다면 사용자들에게 데이터가 노출되고 타인에 의해 사용량이 초과되거나 문제가 발생할 수 있습니다.

이럴때 next.config.js에 옵션을 설정하여 위의 문제를 방지할 수 있습니다.

 

---

next.config.js

nextJS의 설정들을 하는 Node모듈 파일입니다.(JSON파일이 아닙니다.)

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true
}

module.exports = nextConfig

nextconfig 객체 내부에 설정할 옵션들을 작성하면 됩니다.

 

 

---

redirects

redirects를 사용하게되면 들어온 요청 경로(source)의 패턴이 맞을 때, 해당하는 다른 경로(destination)로 리다이렉션을 처리해주는 옵션입니다.

• source: @string
  해당 서버로 요청하는 url 경로를 입력하는부분으로 패턴형태로도 작성 가능합니다.(request path)
• destination: @string
  라우팅하려는 경로입니다.(response path) 
• permanent: @boolean
  
  • true: 클라이언트와 search엔진에 redirect를 영구적으로 cache하도록 308 status code를 사용
  • false: 일시적으로 cache되지 않는 307 status code를 사용

 

적용 예시

next.config.js

const nextConfig = {
  reactStrictMode: true,
  async redirects(){
    return [
      {
        source: "/old-notice/:fileNo*",
        destination: "/notice/:fileNo*",
        permanent: false
      }
    ]
  }
}

module.exports = nextConfig

설정이 끝나면 서버를 재시작해야 적용됩니다.

 

사용자 url : localhost:3000/old-notice/12345/comments/blahbla-> redirects처리페이지가 리다이렉션되어 변경됨 > localhost:3000/notice/12345/comments/blahbla

 

---

rewrites

redirects와 비슷하게 생겼고, 사용법도 비슷하다.

차이점이라면 redirects는 request url의 패턴이 일치하면 destination으로 리다이렉션처리를 해주지만, rewrites에서는 request url의 패턴을 확인하고 일치하게되면 페이지 이동이 아닌 매핑주소로 요청을 하게된다.

즉, 요청 주소와 실제로 요청하는 주소가 분리되게 되어 위에서 언급한 민감한 데이터가 포함된 GET방식의 REST API에서 민감한 부분을 제거하여 요청할 수 있게된다.

• source : @string
  서버로 요청하는 url의 패턴을 작성한다.(hide request path)
• destination: @string
  실제로 request하는 매핑 주소를 입력한다.(real request path)
  

사용예시

.env

API_KEY="실제로 동작할 API키"

next.config.js

/** @type {import('next').NextConfig} */
//환경설정에서 작성한 API_KEY를 가져온다.
const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async rewrites(){
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      }
    ]
  }
}

module.exports = nextConfig

"localhost:3000/api/movies" -> "https://api.themovies... ..."

fetch와 같은 비동기함수를 통해 "/api/movies"에 입력을 하게되면 실제로는 destination에 적용된 부분이 매핑되어 원하는 형태의 데이터가 호출된다.