본문 바로가기
Develop

Vercel 404 오류 해결하기 - 간단한 Rewrite 설정

by hongreat 2024. 10. 8.

Vercel에서 Next.js 프로젝트를 배포하여 사용 중 입니다.

 

blog나 tags와 같이 미리 정의된 경로 뒤에 예상치 못한 경로가 붙는 경우는 Next.js에서 적절히 커스텀 404 페이지 처리를 해두었습니다.

 

정확한 원인을 알 수 없으나, 브라우저단에서 다국어 지원 설정에서 특정 언어 경로(/en)가 자동으로 붙는 현상이 생겼습니다.

 

루트 URL을 기준으로 잘못진입하는 케이스는 생각을 못했었습니다. 때문에 Vercel의 404 오류가 발생했습니다. 

목차

    vercel 404 Error

     

     

     

    해결 방법

     

    Nextjs 프로젝트 Root 에 vercel.json 파일을 생성합니다.

     

    vercel.json 파일에 아래 코드를 넣고 저장 및 code push(git)-배포 를 진행합니다.

     

    {
      "rewrites": [{ "source": "/(.*)", "destination": "/" }]
    }

     

     

     

    이 설정은 모든 요청을 루트 경로로 리다이렉트하는 역할을 합니다.

     

    이렇게 하면 기존의 특정 경로에서 발생하는 404 오류 문제를 쉽게 해결할 수 있습니다.