Next.js GitHub Pages 커스텀 도메인 적용 방법

Tags

Domain, Gabia, GitHub Actions, GitHub Pages, Next.js

1. 개요

Next.js GitHub Pages 커스텀 도메인 적용 방법에 대해 정리한 페이지입니다.

2. GitHub Pages 커스텀 도메인 적용하기

2.1. 도메인 구매하기

먼저 커스텀 도메인을 적용하기 위해선 도메인을 구매해야 합니다. 여러 사이트가 있지만, 저는 가비아에서 구매하였습니다.

2.2. DNS 설정하기

My가비아 > DNS 관리툴로 이동합니다.

이후 구매한 도메인의 설정 버튼을 클릭합니다.

DNS 설정 페이지에서 다음과 같이 GitHub Pages의 IP 주소를 입력합니다.

Info.

cname 레코드에는 배포하는 Repository 이름과 상관없이, <GitHub 닉네임명>.github.io.을 입력하면 됩니다.

2.3. 커스텀 도메인 설정하기

GitHub Pages로 배포한 Repository에서 Settings > Pages로 이동한 후, Custom domain에 구매한 도메인명을 입력한 후 대기합니다.

설정이 완료된 후 시간이 조금 지나면, 다음과 같이 DNS check successful이 표시됩니다.

2.4. basePath 설정 제거하기

이전에 GitHub Pages로 배포하였을 때, 다음과 같은 basePath 설정이 존재하였습니다.

1/* next.config.ts */
2
3const nextConfig: NextConfig = {
4  /* config options here */
5  output: "export",
6  basePath: "/mdx-blog",
7  images: {
8    unoptimized: true,
9  },
10
11  /* ... */
12};

하지만 커스텀 도메인 적용 이후에는 해당 설정이 존재하는 경우 다음과 같이 css 파일이나 이미지 경로에서 오류가 발생합니다.

커스텀 도메인 적용 이후에는 다음과 같이 basePath 설정을 제거하면 됩니다.

1/* next.config.ts */
2
3const nextConfig: NextConfig = {
4  /* config options here */
5  output: "export",
6  images: {
7    unoptimized: true,
8  },
9
10  /* ... */
11};

3. 참고 자료

• 웹을 넘어 클라우드로. 가비아
• 도메인 구매하기 (가비아)
• GitHub Pages 가비아 도메인 연결하기
• GitHub Pages 사이트의 사용자 지정 도메인 관리 - GitHub 문서
• [git]깃블로그 가비아 도메인으로 퍼블리싱하기 - Seokmin.Lee