Next.js_09_리다이렉트

리다이렉트

Next.js에서는 폴더의 이름을 바꾸어주면 그것이 곧 주소가 된다.

그런데 옛날 주소로 즐겨찾기 해둔 사람이 있을 수 있다.
이전에 사용했던 products을 items로 바꿔서 이동시켜주면 되는데
이럴 때 리다이렉트를 사용한다.

1. next.config.js파일을 수정한다.
이 파일은 next.js 서버를 설정하는 파일이다.

next.js는 서버를 실행하는 것이기 때문에
서버에서 파일에 보이는 것과 같은 처리를 해준다.

2. next.js의 공식 홈페이지에 들어가서 redirect를 검색해 들어가서 코드를 복사해온다.

module.exports는 node.js에서 default export하는 것으로 이해하면된다.

async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },

를 복사해온다.

리다이렉트라는 프로퍼티로 async함수를 지정하는 문법이다.
리다이렉트 함수는

{
        source: '/about',
        destination: '/',
        permanent: true,
},

를 배열로 return하는 함수이다.
source는 리다이렉트 처리를 할 주소를 말하고
destination은 이동시킬 주소를 말한다.

지금같은 경우는 products로 시작하는 주소를 items로 바꿀 것이기 때문에
아래와 같이 작성하면 된다.

여기서 :id는 Param의 이름이다.
permanent 값을 true로 하면
308 Permanent Redirect로 리다이렉트할 수 있다.

참고) Next.js를 다시 껐다가 다시 작동해야함
ctrl + c -> npm run dev