Next.js Github Pages에 배포하기

리액트로 만든 프로젝트를 Github Pages에 배포해본 경험은 많지만 실제로 Next.js로 배포해본 경험은 거의 전무하다.

일단 Next.js로 배포하기 위해선 React보다 더 설정해줘야 할 것이 많다. 그러다보니 배포 과정이 순탄치 않았다.

그러던 중, 구글링을 하다가 우연히 가장 쉽고 좋은 방법을 찾게 되었다.
오늘 이 방법을 통해서 Next.js를 Github Pages에 배포하는 법을 소개해보려고 한다.

참고로 구글링으로도 충분히 알아볼 수 있는 내용이라 github에서 page 설정은 너무 길어져서 뺐다.

이 글 마지막에 출처링크를 올려놓을테니 링크를 타고 읽어봐도 좋다.

1. basePath 설정

Next.js 프로젝트에 next.config.js라는 엔트리 파일이 있을 것이다.
여기에 basePath를 적어주자.

const nextConfig = {
  basePath: "/{리포지토리 이름}",
};

참고로 내가 찾아본 블로그 글에 의하면 리포지토리 이름을 '메인 레포지토리 (아이디.github.io) 라면 /로 적는다' 라고 말해줬는데, 나의 경우에는 리포지토리 이름을 적었기에 라우팅에 문제가 발생하지 않았다.
참고로 이 글을 읽고 '/' 넣었는데 다른 페이지를 라우팅을 못하는 문제가 발생했다.
아마 내가 이해를 잘 못했거나 다른 설정이 잘못되었다고 생각이 들지만, 배포했을 때 라우팅에 문제가 발생했다면 리포지토리 이름을 넣는 것을 추천한다.

2. gh-pages

React도 마찬가지지만 github pages에 배포를 하려면 gh-pages를 설치해주는 게 좋다.
다음 명령어를 통해서 설치하자. yarn 명령어와 npm 명령어를 올려놓았다. 본인이 사용하는 패키지 매니저에 따라서 사용하면 된다.

yarn add gh-pages -D (yarn 사용자)
npm i --save-dev gh-pages (npm 사용자)

3. package.json scripts 추가

다음은 deploy를 위해 코드를 추가해야한다.

"predeploy": "npm run build",
"deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"

package.json 파일에 보면 script 부분에 두 코드를 추가해야한다.

4. Deploy

마지막으로 터미널에 다음 명령어를 입력하자.
이것도 본인의 패키지 매니저에 따라서 입력하면 된다.

yarn deploy
or
npm run deploy

5. 결론

생각보다 어렵지 않은 과정이었다. 물론 구글링에 나와있는 방법은 무궁무진하다. 프로젝트의 특성에 맞게 그 방법을 사용해도 괜찮아보인다.
이 글이 도움이 되었으면 좋겠고, 내가 참고했던 Jason Choi's Dev Blog에도 방문해보면 큰 도움이 될 거라 생각된다. 다음은 출처 링크다.

Jason Choi's Dev Blog