Next.js `npm start` 404 페이지를 찾을 수 없는 오류에 대한 문제 해결 방법에 대한 글

Next JS npm start로 물리적 페이지를로드 할 때 404 페이지를 찾을 수 없음 오류 npm start 명령을 사용하여 Next.js 앱에서 물리적 페이지를로드하려고 할 때 404 페이지를 찾을 수 없는 오류가 발생하는 경우, 혼자가 아닙니다. 특히 …

title_thumbnail(Next.js `npm start` 404 페이지를 찾을 수 없는 오류에 대한 문제 해결 방법에 대한 글)

Next JS npm start로 물리적 페이지를로드 할 때 404 페이지를 찾을 수 없음 오류

npm start 명령을 사용하여 Next.js 앱에서 물리적 페이지를로드하려고 할 때 404 페이지를 찾을 수 없는 오류가 발생하는 경우, 혼자가 아닙니다. 특히 프로젝트가 npm run dev 명령과 잘 작동하는 경우에는 당혹스러울 수 있습니다. 이 블로그 게시물에서는이 문제의 일반적인 원인과 해결할 수있는 가능한 솔루션을 탐색합니다.

1. Windows에서 대문자로 된 파일 이름

404 오류의 가능한 원인 중 하나는 Windows에서 대문자로 된 파일 이름입니다. Next.js는 파일 이름을 대소문자를 구분하여 처리하므로 파일 이름에 대문자가 포함되어 있으면 404 오류가 발생할 수 있습니다. 이를 해결하려면 모든 파일 이름이 소문자 문자 여야합니다.

2. npm run dev와 npm start의 차이 이해하기

Next.js는 개발과 프로덕션 환경을위한 다른 명령을 제공합니다. npm run dev 명령은 개발 중에 사용되며 스무스한 개발 경험을 위해 핫 리로드를 사용하여 개발 서버를 시작합니다. 반면, npm start 명령은 프로덕션 모드에서 응용 프로그램을 시작하는 데 사용됩니다.

응용 프로그램 빌드

npm start 명령을 실행하기 전에 npm run build 명령을 사용하여 응용 프로그램을 빌드해야합니다. 이 명령은 빌드를 컴파일하고 최적화하여 프로덕션 모드로 준비합니다.

npm run build

웹 서버 시작

응용 프로그램을 빌드 한 후 npm run start 명령을 사용하여 웹 서버를 시작하여 HTML 파일을 제공 할 수 있습니다.

npm run start

Index.js 페이지를 제외한 모든 페이지에서 404 오류가 발생하는 경우, 서버 파일에 문제가있을 수 있다는 것을 나타냅니다. 웹 서버의 API가 요청을 수신하고 올바른 페이지로 리디렉션하는지 확인하십시오.

3. next.config.js에서 basePath 확인

next.config.js 파일에서 basePath를 수정 한 경우 올바른지 확인하십시오. 잘못된 basePath는 라우팅을 깨뜨려 모든 페이지에서 404 오류가 발생할 수 있습니다. 구성 파일에서 basePath가 올바르게 설정되어 있는지 확인하십시오.

예시 next.config.js:

const basePath = process.env.NODE_ENV === "production" ? '/my-app' : '';
  module.exports = {
    basePath: basePath,
    // 나머지 구성
  }

결론

npm start 명령을 사용하여 Next.js 앱에서 404 페이지를 찾을 수 없는 오류가 발생하면 당혹 스러울 수 있지만 위에서 언급한 해결책을 통해이 문제를 해결할 수 있어야합니다. 파일 이름 일관성을 보장하고 개발 및 프로덕션 모드의 차이를 이해하며 시작하기 전에 응용 프로그램을 빌드하고 구성 파일에서 basePath를 확인하십시오.

참고 자료 : 

reactjs

Leave a Comment