[Next.js, vercel]Vercel에서 Next.js 프로젝트 배포 후 404 NOT FOUND 오류 해결 방법 (favicon 관련 문제)

Next.js 프로젝트를 Vercel에 배포할 때, 빌드는 성공했지만 404 NOT FOUND 오류가 발생하는 경우가 있다. 보통 이런 오류는 CORS 문제나 디렉토리 구조의 문제로 인한 것일 수 있지만, 때때로 원인을 찾기 어려운 경우도 있다. 특히 favicon 관련 문제는 원인을 발견하기가가 어려울 수 있다. 이번 글에서는 favicon 관련 404 오류를 해결하는 방법에 대해 알아본다.

1. 문제 상황

Next.js 프로젝트를 Vercel에 배포하고 나서 브라우저에서 404 NOT FOUND 오류가 발생하는 경우, 일반적으로는 아래와 같은 원인들을 먼저 확인해야 한다.

- CORS 문제: 서버에서 리소스를 불러올 때 접근 권한이 없을 때 발생한다.

- 디렉토리 구조 문제: 경로 설정이 잘못되었거나 필요한 파일이 누락되었을 때 발생한다.

- 프로젝트 파일의 손실: 프로젝트를 중간에 처음부터 다시 설정하거나, 보일러플레이트나 빌드 파일을 소실했을 경우에도 문제가 발생할 수 있다. 이러한 상황에서는 파일이 누락되거나 잘못된 설정이 포함될 가능성이 크다.

특히, 프로젝트를 중간에 재구성하거나 파일을 소실한 후 복구할 때, 정적 파일과 관련된 오류가 발생할 가능성이 높다. 이 경우 프로젝트 설정에 있어 작은 부분도 누락되기 쉬워, favicon과 같은 기본적인 파일이 사라졌을 수 있다.

그러나 이러한 문제를 모두 확인했음에도 불구하고 favicon 관련해서 404 오류가 발생하는 경우가 있다. 브라우저는 루트 경로에서 favicon.ico 파일을 찾으려 하는데, 해당 파일이 없으면 404 오류가 발생할 수 있다.

2. favicon 관련 404 오류 원인

Next.js 프로젝트에서 기본적으로 favicon.ico 파일이 존재하지 않을 때, 브라우저는 이를 찾지 못해 404 오류를 반환한다. 이때 오류 메시지가 명확하지 않아 문제를 인식하기 어려운 경우도 많다. 브라우저가 정적 자산 중에서 favicon.ico 파일을 요청했을 때, 해당 파일이 없으면 자동으로 404 오류가 발생하게 된다.

3. 해결 방법

1) favicon.ico 파일 확인

Next.js 14의 app directory를 사용한다는 전제하에, 프로젝트의 app 디렉토리에 favicon.ico 파일이 있는지 확인해야 한다.
Next.js는 정적 자산을 /public 폴더에서 관리하므로, 여기에서 favicon.ico 파일을 찾는다. 만약 해당 파일이 없다면 직접 생성해서 추가하거나, 기존 프로젝트의 favicon 파일을 사용하여 /public 폴더에 추가하면 된다.

2) Vercel 프로젝트 재설정

favicon.ico 파일을 추가한 후에도 여전히 문제가 발생할 경우, Vercel에서 새로운 프로젝트를 생성하고 배포를 다시 시도해보는 방법도 있다. Vercel에서 간혹 캐시 문제로 인해 파일이 제대로 반영되지 않을 수 있으므로, 새로운 프로젝트로 다시 빌드하고 배포하는 것이 문제 해결에 도움이 될 수 있다.

4. 요약

1. app 디렉토리에 favicon.ico 파일이 있는지 확인한다.
2. 파일이 없다면 추가하고 다시 빌드한 후 배포한다.
3. 문제가 계속 발생한다면 Vercel에서 새로운 프로젝트를 생성하여 다시 배포한다.

결론

Vercel에 Next.js 프로젝트를 배포할 때 404 NOT FOUND 오류가 발생하면 다양한 원인이 있을 수 있지만, favicon.ico 파일의 존재 여부는 특히 간과되기 쉬운 부분이다. 프로젝트의 app 디렉토리

• 프로젝트 파일의 손실: 프로젝트를 중간에 처음부터 다시 설정하거나, Next.js 보일러플레이트나 빌드 파일을 소실했을 경우에도 문제가 발생할 수 있다. 이러한 상황에서는 파일이 누락되거나 잘못된 설정이 포함될 가능성이 크다.

특히, 프로젝트를 중간에 재구성하거나 파일을 소실한 후 복구할 때, 정적 파일과 관련된 오류가 발생할 가능성이 높다. 이 경우 프로젝트 설정에 있어 작은 부분도 누락되기 쉬워, favicon과 같은 기본적인 파일이 사라졌을 수 있다.

에 이 파일이 없으면 오류가 발생할 수 있으니, 이를 추가한 후 배포하거나 새로운 프로젝트를 생성하여 다시 시도해보면 문제를 해결할 수 있다.

이 글이 404 오류 해결에 도움이 되길 바란다. Vercel과 Next.js의 배포 과정에서 생길 수 있는 다양한 문제들을 차근차근 해결해 나가면서 더욱 안정적인 배포 환경을 구축할 수 있을 것이다.