Netlify에 정적 Next.js 사이트 배포(Git LFS 사용)

이것은 Netlify를 사용하여 정적 Next.js 사이트를 배포하는 방법에 대한 간단한 메모입니다.

1단계: 빌드 스크립트 준비

package.json 에서 다음과 같이 build 스크립트를 추가(또는 수정)합니다.

{
  ...

  "scripts": {
    ...

    "build": "next build && next export",

    ...
  }
}

참고: ...는 package.json 파일의 다른 코드 줄을 나타냅니다.

자세한 내용은 Vercel (2021) 을 참조하십시오.

2단계: 메인 브랜치로 푸시

package.json의 변경 사항을 GitHub 리포지토리로 푸시하는 것을 잊지 마십시오.Netlify는 로컬 저장소를 조사하지 않습니다. :-)

3단계: Netlify의 "빌드 설정" 구성

Netlify 사용자 대시보드에서 다음 도움말 문서Netlify (2021b)에 따라 Netlify 사용자 대시보드의 빌드 설정을 찾습니다.

그런 다음 설정

빌드 명령: npm run build

게시 디렉토리: out

Netlify (2021a)에서 제안한 대로 .

4단계(선택 사항): Netlify의 Git LFS 기능 켜기

Git LFS를 사용하는 경우 Netlify에 Git LFS에 저장된 모든 자산을 가져오도록 알려야 합니다.

Netlify 사용자 대시보드에서 상단 메뉴 표시줄의 "사이트 설정"을 클릭한 다음 왼쪽 열 메뉴에서 "빌드 및 배포"를 클릭한 다음 "환경"을 클릭하여 "환경 변수"섹션을 찾습니다. (자세한 내용은 Netlify 2021c을 참조하십시오.)

"변수 편집"을 클릭하고 "GIT_LFS_ENABLED"를 키로 설정하고 "true"를 값으로 설정합니다.

이렇게 하면 Netlify는 "git lfs clone를 사용하여 저장소를 확인합니다. 그렇지 않으면 GitHub 저장소를 복제할 때 git clone "(Netlify 2021d에서 인용)를 사용합니다.

배포하는 동안 복제가 실패하면 큰 파일이 GitHub의 LFS 서버로 푸시되지 않았을 가능성이 가장 큽니다. 모든 LFS 추적 파일을 푸시하려면 다음을 실행하십시오.

git lfs push --all origin

로컬 리포지토리(GitHub 2021)에서.


이제 Netlify를 사용하여 Next.js 사이트를 성공적으로 배포해야 합니다!

Next.js도 Netlify도 문서에서 이 정보를 찾을 수 있는 위치를 명확하게 나타내지 않았기 때문에 이것을 알아내는 데 한 시간 이상이 걸렸습니다.Netlify는 사이트 배포가 매우 쉽다고 주장합니다. 내가 그것을 알아 낸 후에는 실제로 그렇게 복잡하지 않습니다.Netlify의 사용자 대시보드 UI가 사용하기 쉽지 않고 도움말 문서에서 관련 정보를 찾을 수 있는 위치에 대해 충분히 명확하지 않다는 것입니다.

서버 측 렌더링을 사용하면 완전히 다른 이야기가 될 것 같습니다. Netlify (2021a) 을 참조하십시오.

Git LFS를 사용하고 싶기 때문에 Next.js 앱을 배포하기 위해 Vercel이 아닌 Netlify를 선택했습니다. Vercel은 Git LFS를 처리할 수 없습니다. 저는 이 기능을 다른 여러 기능과 함께 요청했습니다. 아직 응답이 없습니다. 최신 정보는 Vercel GitHub issue #3716 을 참조하십시오.