CRA에 Next.js 적용하기 3

- Next.js 기본 구조

 

- AWS Amplify 배포 관련 이슈

1. Artifact directory doesn't exist: build

build란 디렉터리를 찾지 못해 발생하는 에러.

next build를 실행하면 .next라는 파일에 서버/클라이언트에게 제공될 build 파일이 생성되는데...

→ Amplify 측에서 build 디렉터리가 없다고 판단해버린다.

 

- 해결책

yarn build시 .next란 폴더 말고 build라는 폴더에 build 하면 해결.

next.config.js 폴더에 다음을 추가해 custom할 수 있다.

next.config.js

2. Non-Zero Exit Code detected

에러 코드 자체는 build 파일 내 강제 exit 코드가 있어 build가 중지되어 발생한 것.

but 근본적인 원인은 처음 Amplify에서 hosting 할 때

프레임워크를 React로 인식했기 때문 (1번 문제 역시 이로 인해 발생한 것)

 

- 해결책

따라서... Amplify에서 새롭게 hosting을 해준다.

자동적으로 Next.js를 인식하며, 따라서 .next파일로 build를 해도 무방

 

3. net::ERR_ABORTED 404 (Not Found)

404 에러 = 연결에는 이상이 없지만, 서버측에서 올바른 html을 제공 x

→ 즉 우리가 build를 제대로 하지 못한 것!

 

package.json의 build에 next export를 추가해준다. 얘가 뭐냐면...

next export is recommended if you have some dynamic pages which need to some data to be fetched only at 'build' time. It is perfect for pages like landing pages, blogs, news articles etc, or for other kinds of pages which are updated only during code builds. You can setup a background task to build your code at regular intervals if your page data needs to be updated more frequently. This will speed up your 'first paint' speed and also provide the entire page data to search engine crawlers for indexing.

next export를 통해 모든 페이지를 모든 호스트에서 제공 할 수 있는 정적 HTML 파일로 내 보낸다고 한다! (공식문서)