Next.js Random Build Id 404 이슈 해결 과정공유

1. 문제 상황

크몽 프론트 엔드에서는 Next.js를 메인 프레임워크로 사용하고 있었습니다. 그런데 빌드 후에 새로 고침을 하지 않고 link hover를 할 경우, 이전 빌드 ID에 해당하는 prefetch data 값을 호출해서 404 오류가 발생하는 문제가 발생했습니다.

2. 해결 방법

첫 번째로는 Nginx를 도입하는 방법이 있습니다. 빌드할 때 커스텀 빌드 ID로 URL을 Rewrite해 주면 새로운 빌드 ID의 경로에 해당하는 파일도 호출할 수 있습니다.

두 번째로는 generateBuildId를 활용하는 방법이 있습니다. 이를 사용하면 다양한 방법으로 빌드 ID를 생성할 수 있습니다.

세 번째로는 새로 고침을 요구하는 Toast를 띄우는 것이 방법이 될 수 있습니다.

3. 구현 과정

Nginx를 도입하기 전, 크몽 프론트 엔드 배포 환경을 구성하고 Nginx를 추가했습니다. Nginx에서 Commit Hash 값을 가져와서 해당 값을 URL에 추가해서 Rewrite해 주도록 세팅했습니다.

4. 결론

각자 환경에 맞게 해결 방법을 찾아 실행하는 것이 중요합니다. Custom Build Id를 사용하더라도 다양한 방법으로 해결할 수 있으며, 새로 고침을 요구하는 기능을 추가하는 것도 좋은 방법일 수 있습니다.