Vercel 새로고침 시 404: NOT_FOUND 에러

Vercel에 배포한 프로젝트에서 페이지 이동은 잘 되는데,

새로고침 하면 404 에러가 나서 이 블로그를 찾아오셨군요ㅇㅁㅇ?!

저도 굉장히 당황했던 경험이었는데요

---

해결 방법은 간단합니다

프로젝트 루트 경로에 vercel.json 파일을 만들고

아래 코드를 추가해 준다음 재배포해주세요

{
  "routes": [
    {
      "handle": "filesystem"
    },
    {
      "src": "/.*",
      "dest": "/index.html"
    }
  ]
}

 

 

Vercel 설치 및 재배포 방법을 알고 싶다면 아래 블로그로 이동해 주세요

https://hr0513.tistory.com/132

---

💡 404 에러 원인은 무엇인가요?

정적 파일을 찾지 못해서 발생하는 문제예요

React 같은 SPA에서는 URL로 이동해도 실제로는 모두 index.html 하나에서 렌더링이 되죠

 

하지만 Vercel은 새로고침 시 해당 경로에 직접 접근하기 때문에

/about, /post/1 등은 실제로 존재하지 않는 경로로 인식되어 404로 띄우게 됩니다