Github 페이지에 Next.js 배포

중요: 다음 내보내기를 사용하므로 Next.js 서버가 실행되지 않고 일반 페이지에 API 경로 또는 포괄 경로와 같은 항목이 없습니다(자세한 내용은 see the docs ).

(그런데 github 페이지와 함께 사용하기 위해 official Next.js example을보고이 모든 것을 배웠습니다)

준비가 된? 갑시다.

next.config.js 업데이트

const nextConfig = {

  // ... you might have other stuff above here!
  // just add this basePath property
  basePath: 'REPOSITORY_NAME'
}

module.exports = nextConfig

왜요?
next export 실행 시 기본적으로 Next.js는 사이트의 루트가 <some_domain_name>.com/일 것으로 예상하지만 Github Pages에서는 (항상) 그렇지 않습니다. 프로젝트 사이트를 생성하는 경우(즉, 임의의 저장소에 임의의 프로젝트가 있고 이를 위해 github 페이지를 활성화하려는 경우) URL은 다음과 같습니다. https://<your_github_username>.github.io/<name_of_repository>/ Next 구성에서 basePath를 수정하여 끝납니다.

그러나 이제 <name_of_repository>/에서 dev 서버를 실행할 때 해당 basePath도 거기에 추가해야 합니다! 따라서 저장소 이름이 'awesome-app'이고 basePath를 '/awesome-app'으로 변경하면 이제 http://localhost:3000/에서 앱에 액세스할 수 있습니다.

경우에 따라 이 단계를 건너뛰어야 합니다.

사용자 및 조직 사이트의 경우 http://localhost:3000/awesome-app이며 프로젝트 사이트와 사용자/조직 사이트 모두에 대해 내가 이해하는 바(시도하지 않음)에서 맞춤 도메인을 설정할 수 있지만 어떤 경우에도 이 부분을 건너뛸 수 있습니다. 사이트의 루트는 기본 basePath를 따릅니다.

빌드 및 내보내기

다음 명령을 순서대로 실행합니다.

https://<your_github_username>.github.io. - 앱 빌드

npx next build - 앱의 정적 내보내기 생성

모든 것이 잘되면 github에서 제공할 파일이 있는 'out' 폴더가 표시됩니다.

.nojekyll 파일을 out/ 디렉터리에 추가합니다.

github 페이지에서 jekyll을 사용하지 않으려면(next.js를 사용하고 있으므로) out/에 .nojekyll 파일을 추가해야 합니다.

명령: npx next export

커밋 변경

실행 touch out/.nojekyll 다음 git add out/ -fgit이 .gitignore에 있는 out/dir에 대해 불평하기 때문에 git commit -m "Deploy" 옵션을 추가해야 합니다.

그리고 마지막 (굉장한) 명령

-f이렇게 하면 원격 저장소git subtree push --prefix out origin gh-pages(github에 있음)에 gh-pages라는 새 분기가 만들어지고 이 새 분기에는 out/디렉토리 내부의 모든 콘텐츠가 있지만 모두 루트에 있으므로 파일은 해당 분기의 github에서 쉽게 제공할 수 있습니다.

작업 흐름을 쉽게

이 "배포"스크립트를 package.json에 추가할 수 있습니다.

  "scripts": {

    // ... you might have other scripts above and around!

    "deploy": "next build && next export && touch out/.nojekyll && git add out/ -f && git commit -m \"Deploy\" && git subtree push --prefix out origin gh-pages"

  },

origin 또는 npm run deploy 명령으로 실행합니다.