Netlify를 이용해서 NextJS 앱을 배포할 때 발생하는 문제 해결 방법

 

npx create-next-app 명령어를 입력하면 손쉽게 NextJS가 설정된 프로젝트를 만들 수 있다.

이를 Netlify에 배포하려다 보면 몇 가지 문제가 발생한다.

 

1. 컴포넌트 인식 문제

Netlify에서 배포를 위한 빌드 중 터미널에 다음 에러가 나타났다.

ModuleNotFoundError: Module not found: Error: Can't resolve '../components/header' in '/opt/build/repo/pages'

header라는 컴포넌트를 찾을 수 없다는 문제다.

 

pages 폴더에 위치한 컴포넌트와 components 폴더에 위치한 컴포넌트 파일의 이름에 차이를 둬야 한다.

아래에 따르면 Netlify에서는 우분투를 사용하기 때문에 파일 이름의 시작이 대문자인지 소문자인지에 따라 문제가 발생한다.

 

The problem was incorrect case for components. It works on Windows and macOS (that’s why it build successfully on my Windows laptop and you might be using either of the two), but, Netlify uses Ubuntu which is Linux based and Linux can’t work with the mixed cases. So, all your components are in the folders which start with a small case, while the pages start with a capital case. While importing the components, you need to maintain the case, but, instead, you were importing all the components with the starting letter capital.

 

answers.netlify.com/t/build-command-failed-error-refers-to-webpack/25012/6

 

components의 파일 이름을 모두 소문자로, pages의 컴포넌트에서 불러오는 scss 파일 앞 글자를 대문자로 바꾸니 해결됐다.

 

2. Page Not Found 에러

빌드가 성공적으로 끝났지만 홈페이지 링크로 들어가면 페이지를 찾을 수 없다는 에러가 발생한다.

이 문제는 몇 가지 설정만 올바로 해주면 해결 된다.

 

Netlify의 빌드 설정에서 Build Command는 npm run build로 바꾸고

Publish Directory는  out/으로 바꾼다.

 

프로젝트에서는 package.json의 scripts 속성을 다음으로 바꾼다.

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

next export 명령을 더 추가한 것이다.

자세한 내용은 아래 링크에서 잘 설명했다.

 

dev.to/tomtomdu73/deploy-your-next-js-app-to-netlify-in-2-minutes-1n2f