nextjs, firebase hosting - refresh시 404에러 해결

배포시에 자꾸 새로고침하면 root페이지로 이동하는 에러...

firebase 설정시 rewrites를 추가해주면 root페이지로 이동하고

그렇지 않으면 404 에러가 난다.

 

SPA관련해서 발생하는 에러라고 하는데 

나는 해결방법만 알면 된다.

 

firebase 설정에서 해당 내용을 추가해주었다.

 

firebase.json

"hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "appAssociation": "AUTO",
    "rewrites": [
      {
        "source": "/**",
        "destination": "/index.html",
        "dynamicLinks": true
      },
      { "source": "/board/**", "dynamicLinks": true }
    ]
  },

 

 

하지만 동적페이지는 여전히 root페이지로 이동하였기 때문에

stackoverflow에서 확인한 글대로

아래와 같이 app파일에 코드를 추가해주었다.

_app.js

 // 리라우팅시 root페이지로 이동(동적페이지) - 방지를 위함
  useEffect(() => {
    router.push(window.location.href)
  }, [])