Next.js 앱을 GitHub Pages 로 배포하기
블로그를 Next.js 로 만들고 GitHub Pages 로 배포하는 과정을 남긴 기록
계기
기존에 블로그를 GitHub Pages 로 운영하고 있었다.
Jekyll 로 만들어진 블로그였는데, Ruby 보다는 더 친숙한 JavaScript 로 블로그를 만들고 싶었다.
그러던 중 Next.js 를 알게 되어 블로그를 Next.js 로 만들어보기로 했다.
기존 작성된 글 저장소 분리하기
먼저 기존 블로그 저장소에서 작성한 포스트를 따로 저장소를 만들어 분리해두었다.
이에 대한 글은 이전 글에서 작성해 두었으니 생략하겠다.
Next.js 블로그 만들기
먼저 Next.js 프로젝트를 생성한다.
npx create-next-app
빌드된 정적 파일 만들기
GitHub Pages 에서 Next.js 로 만든 블로그를 배포하기 위해서는 빌드된 정적 파일을 배포해야 한다.
이를 만들기 위해서는 next.config.mjs 파일을 열어 output 설정을 "export" 로 설정한다.
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
...
output: "export",
};
export default nextConfig;
배포 자동화하기
배포 자동화를 위해 GitHub Actions 를 사용하자.
먼저 GitHub 저장소의 Settings 탭 > Code and automation / Pages > Build and deployment / Source 에서 GitHub Actions 를 선택한다. 이를 선택하면 바로 밑에 “Use a suggested workflow, browse all workflows, or create your own.” 라는 안내문구가 추가되는데, 여기서 “browse all workflows” 를 선택한다.
“Search workflows” 에 “Next.js” 를 입력하면 검색되는 “Next.js” 라는 이름의 workflow 템플릿의 “Configure” 버튼을 누른다.
그러면 < 저장소 이름 >/.github/workflows/nextjs.yml 파일을 생성하기 위한 페이지가 나와 있고 템플릿을 기반으로 작성되어 있다.
독자가 이 글을 읽는 시점에는 해당 문제가 해결되었을 수도 있지만, 이 글이 작성되는 시기에는 이 템플릿을 그대로 사용하면 문제가 발생하므로 수정이 필요하다. 먼저 next export 명령을 삭제한다.
그리고 빌드 직전에 next.config.js 파일을 삭제하는 명령을 추가해야한다.
... # 76 번째 줄
- name: Build with Next.js
- run: $ next build
+ run: |
+ rm next.config.js
+ $ next build
- - name: Static HTML export with Next.js
- run: $ next export
...
해당 문제에 대해서는 이전 글 에서 다루었으니 참고하자.
이후 우측 상단의 “Commit changes…” 버튼을 누르고 커밋 메세지를 작성해 커밋을 생성한다.
배포 확인
커밋을 완료하면 GitHub Actions 가 자동으로 빌드를 시작한다.
저장소에 들어가 Actions 탭에 들어가면 빌드와 배포가 진행되는 과정을 확인할 수 있다.
좌측 메뉴의 Management / Deployments 에 들어가면 배포 내역이 나와있는데, 만약 배포가 무사히 완료됐다면 커밋 시각 우측에 배포된 페이지 링크 아이콘이 있을 것이다.
해당 아이콘을 클릭해 배포된 페이지로 이동해서 우리의 결과물을 직접 확인해보자!