[Firebase] Nextjs 환경에서 dynamic routing 페이지 새로고침 시 홈 화면으로 이동하는 이슈

회사에서 firebase 로 간단한 작업을 하다가 발견한 이슈이다.

동적 라우팅을 한 페이지에서 새로고침을 하면 홈화면으로 가는 이슈...

 

정말 세상에 진심으로 기겁할 뻔 했다.

이전 포스팅(https://nychicken.tistory.com/23) 에서 설정한걸로 끝난건줄 알았는데 전혀 아니었던 것!

 

 

https://github.com/firebase/firebase-js-sdk/discussions/4980

NextJS Dynamic Routing with Firebase · Discussion #4980 · firebase/firebase-js-sdk

국내에서 정리된 해결법은 못찾아서 정리하고자 한다.

나는 위의 링크를 참고하고 해결했다.

 

 

Nextjs 로 생성한 프로젝트를 build 하고 나면 .next 폴더에 routes-manifest.json 파일이 생성된다.

routes-manifest.json

 

 

이 파일을 보면 옵션 중 dynamicRoutes 를 찾을 수 있다.

진짜 완전 어지럽게 생기고, 난생 처음보는 좀 짱나게 생긴 내용이다.

// .next/routes-manifest.json

{
  "version": 3,
  "pages404": true,
  "basePath": "",
  "redirects": [
    {
      "source": "/:path+/",
      "destination": "/:path+",
      "internal": true,
      "statusCode": 308,
      "regex": "^(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))/$"
    }
  ],
  "headers": [],
  "dynamicRoutes": [   // 이놈이다!
    {
      "page": "/user/[userId]",
      "regex": "^/user/([^/]+?)(?:/)?$",
      "routeKeys": { "userId": "userId" },
      "namedRegex": "^/user/(?<userId>[^/]+?)(?:/)?$"
    }
  ],
  "staticRoutes": [
    {
      "page": "/",
      "regex": "^/(?:/)?$",
      "routeKeys": {},
      "namedRegex": "^/(?:/)?$"
    },
    {
      "page": "/home",
      "regex": "^/home(?:/)?$",
      "routeKeys": {},
      "namedRegex": "^/home(?:/)?$"
    }
  ],
  "dataRoutes": [],
  "rsc": {
    "header": "RSC",
    "varyHeader": "RSC, Next-Router-State-Tree, Next-Router-Prefetch"
  },
  "rewrites": []
}

 

저 dynamicRoutes 에 있는 내용을 싹 복사하자.

그리고 firebase.json 으로 이동!

 

 

"hosting" 옵션 안에 rewrites 하나 만들어준 다음, 복사 해온 내용을 넣어주자.
복사해온 값 중에 "routeKeys" 랑 "namedRegex" 은 삭제해주자.

그리고 page 는 destination 으로 바꿔주고, 값 맨 뒤에는 .html 을 붙여주면 끝!

// firebase.json

{
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [
      {
      	"destination": "/user/[userId].html", // 값 맨 뒤에 .html을 넣어주고, page 는 destination 으로  바꿔주자
      	"regex": "^/user/([^/]+?)(?:/)?$",
      }
    ]
  }
}

 

 

정말... 별거 아닌거같은데 이 내용을 못찾아서 한참 고생했었다.

다들 고생하지말라구... 😇