예전에 Next.js를 사용해서 github 블로그를 만들고 싶다는 생각이 들어 세팅까지 하고 더이상 만들지 않았었는데, 세팅 과정을 정리해놓은 글이 남아있길래 혹시 참고하고 싶은 사람이 있을까 해서 올려봅니다.
심지어 블로그를 만든 다음에 거기다가 올리려고 했던 것 같군요... 지금은 사실 벨로그 생활에 매우 만족하고 있습니다.

⚠️ 2021년 12월에 작성한 글입니다. 현재는 적용되지 않을 수 있는 점 참고 부탁드립니다!

0. 공식문서

next.js/examples/gh-pages at canary · vercel/next.js

공식예제가 아주 간편하게 잘 되어있습니다.

초보 개발자도 쉽게 쓸 수 있게 문서 또한 간결합니다.

위 문서를 한국어로 이해하기 쉽도록 번역해보았습니다.

물론 언제나 그렇듯이 원어를 읽을 수 있다면 가장 정확한 전달이 가능하겠지만, 모국어로 읽는 편안함도 무시할 수 없기에 자주 볼만한 문서가 있다면 항상 번역하고 있습니다.

1. cna로 예제 복사하기

자신이 사용하는 패키지 매니저를 사용하여 예제를 복사해 봅시다.

• npm npx create-next-app --example gh-pages gh-pages-app 또는 npx create-next-app -e gh-pages gh-pages-app 으로 복사가 가능합니다. gh-pages-app 부분은 원하는 repo 이름으로 설정하시면 되겠습니다.
  
• yarn npx 를 yarn 으로 바꿔서 실행시키면 됩니다.
  

2. 환경 파일 변경하기

이 프로젝트는 어떤 경로로 갈 것이다..를 결정해주는 환경파일이 존재한다.

해당 파일에서 경로를 repo 이름으로 바꾸어주자.

나는 blog 로 정했다.

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'process.env.BACKEND_URL': prod ? '/blog' : '',
}

// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)

const debug = process.env.NODE_ENV !== 'production'

module.exports = {
  assetPrefix: !debug ? '/blog/' : '',
}

3. master 브랜치로 푸쉬

평소에 하던대로 푸쉬하면 된다.

4. 배포

repo 루트 위치에서 npm run deploy 를 실행하면 배포가 끝난다.

5. 확인

잘 배포되었는지 확인해보자.

경로는 https://<깃헙유저이름>.github.io/<프로젝트명> 이다.