[NextJS] Redirect and Rewrite

NextJS로 프로젝트를 진행하다보면 url를 유저에게 숨겨야하거나 api-key를 노출시키고싶지 않을때가 생긴다. 이럴때 쓰면 좋은 NextJS의 Redirect와 Rewrite기능을 알아보자. 앞서 두 기능은 유저가 특정 path로 이동시 정해진 화면이 보여지도록 하며 next.config.js파일에서 설정할수있다.

💻 Redirect

Redirects을 사용하면 들어오는 요청 경로를 다른 대상 경로로 Redirect할수있다.

🖤 설정

• next.config.js

<script>
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}
</script>

-source: 들어오는 경로 패턴
-destination: 라우팅하려는 경로
-permanent: true또는 false로 지정. 
			true는 클라이언트/검색엔진에 redirect를 영원히 캐시하도록 지시하는 308상태코드를 사용하는 경우
            false는 일시적이고 캐시되지 않는 307상태코드를 사용하는 경우
            

설정이후 서버를 커스텀이 재설정되었기에 서버를 다시 실행시켜야 한다. 해당 예시 코드로 설정 후 실행시 "/about"이라는 경로를 입력하면 "/"라는 경로로 리다이렉트되는 것을 알수있다.

🖤 와일드카드 경로 일치

*와일드카드 경로를 일치시키려면 매개변수 뒤에 사용할 수 있다. 예시를 살펴보자.
<script>
	async redirects() {
        return [
            {
                source: "/number/:path*",
                destination: "/new-number/:path*",
                permanent: false,
            },
        ];
    }
</script>

위와 같이 설정해준뒤 실행된 서버 결과는 아래와 같다.

"/number/1/2/3/4/5"로 경로 지정을 해주었고 "/new-number/1/2/3/4/5"로 도달된것을 알 수 있다.

💻 Rewrite

Rewrite을 사용하면 들어오는 요청 경로를 다른 대상 경로에 매핑할 수 있다. Rewrite는 URL프록시 역할을 하고 대상 경로를 마스킹하여 유저가 사이트에서 자신의 위치를 변경하지 않은 것처럼 보이게 한다. (반대로 redirects는 새페이지로 다시 라우팅되고 URL변경 사항을 표시한다.)

🖤 설정

• next.config.js

<script>
  module.exports = {
    async rewrites() {
      return [
        {
          source: '/about',
          destination: '/',
        },
      ]
    },
  }
</script>

-source: string-들어오는 요청 경로 패턴이다.
-destination: string라우팅하려는 경로이다.

Rewrite은 클라이언트 측 라우팅에 적용되며 URL이 바뀌지 않은 상태로 이동한다.
그렇기에 api키나 특정 경로를 감추고 싶을때 사용한다.

🖤 적용

api키를 감출때 이용한 방법을 살펴보자

<script>
	const API_KEY = process.env.API_KEY;

const nextConfig = {
    reactStrictMode: true,
    async redirects() {
        return [
            {
                source: "/number/:path*",
                destination: "/new-number/:path*",
                permanent: false,
            },
        ];
    },
    async rewrites() {
        return [
            {
                source: "/api/movies",
                destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
            },
        ];
    },
};
</script>

source 주소를 입력하면 destination의 주소로 이동되지만 주소 URL은 바뀌지 않는다. API_KEY키는 .env을 만들어 코드에서도 숨겨주었다.

💻 Redirect과 Rewrite의 차이

Rewrite는 유저가 입력한 url 그대로 유저에게 보여져 유저는 화면이 변경된지 모르는 반면, Redirect는 정해진 path대로 url이 바뀌게된다. 예시로 유저가 www.gyul/kim로 path진입시, www.gyul/kin페이지를 보여주소 싶다면 Redirect를 이용해 source가 " www.gyul/kim"이고 destination을 www.gyul/kin으로 설정해주면 www.gyul/kim를 입력하였을때 www.gyul/kin로 이동된다. Rewrite은 주소창의 url이 그대로 인채로 www.gyul/kim이 유지되지만 화면에 보여지는 것은 www.gyul/kin이다.

참고문헌

공식문헌Redirect
공식문헌Rewrite
next.js의 rewrite와 redirect/벨로그