[next.js] 리다이렉트(redirects), 커스텀 404 페이지

요청 경로를 다른 대상 경로로 리다이렉트 (url을 변경해준다?)를 지정할 수있다

ex)

/next/3  => /prev/3

 

폴더명을 next 에서 prev로 변경하고 참고자료 확인

 

참고자료

next.js 공식 문서

https://nextjs.org/docs/app/api-reference/next-config-js/redirects

 

공식문서들어가서 코드 복사해서 next.config.js에 수정하면된다

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/about',  //변경되기 전 경로(param 값이 같이 따라올경우 같이 적어준다 ex)/about:id)
        destination: '/',  // 변경된 후 경로(param 값이 같이 따라올경우 같이 적어준다 ex)/about:id)
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

 

속성 설명

 

⚠️주의 - 로컬호스트 열린 상태에서 next.config.js 파일 수정하면 적용안됨 로컬호스트 실행 중지하고 다시 터미널에서 npm run dev 해서 실행해줘야한다

 

next/3을 입력해도 없는 페이지가아닌 config에 지정한 prev/3로 이동한다

 

---

커스텀 404 에러 페이지

next.js에서는 간단하게 404.js 파일을 만들면 된다

 

404.js 파일 없을 때

404.js 파일을 만들었을 때