GitHub Pages로 배포하게 된 배경

사이드프로젝트가 Git Organizations라 Vercel 배포는 유료 플랜이라 다른 방법을 찾아보다가 임시적으로 정적 사이트를 개발하고 GitHub Pages에 배포하는 작업을 진행했습니다. Next.js는 SSG(Static Site Generation) 기능을 제공하여 정적 웹사이트 배포에 적합한 프레임워크이므로, GitHub Pages를 이용한 배포를 결정했습니다.

배포 과정 및 해결한 이슈들

• 먼저, Next.js의 output: 'export' 설정을 사용하여 프로젝트를 정적 파일로 내보내는 작업을 시도했습니다. 이를 위해 next.config.js 파일에 다음과 같은 설정을 추가했습니다.

/** @type {import('next').NextConfig} */

const nextConfig = {

  images: {
    // 중략
  },

  output: 'export', // Outputs a Single-Page Application (SPA).

  distDir: 'out', // Changes the build output directory to `./dist/`.

};

export default nextConfig;

• gh-pages 패키지를 설치합니다.

npm install gh-pages --save-dev

• package.json 파일에 배포 스크립트를 추가합니다.

{
  "scripts": {
    "build": "next build && next export",
    "deploy": "gh-pages -d out"
  }
}

1. 이미지 최적화 오류

Next.js는 기본적으로 서버 사이드 렌더링을 지원하지만, 정적 사이트 배포를 위해서는 export 설정이 필요했습니다. 이 과정에서 이미지 최적화를 비활성화하지 않으면, GitHub Pages 같은 정적 사이트에서는 이미지 최적화 기능이 제대로 동작하지 않는다는 사실을 알게 되었습니다. 그래서 unoptimized: true를 추가하였습니다.