[깃허브] Next.js 설치부터 Github Pages로 배포까지

안녕하세요, hr0513입니다! 🥰

 

오늘은 Next.js 프로젝트를 설치하고, Github에 배포하는 방법에 대해 포스팅해보려고 해요.

간단하게 따라 하실 수 있도록 하나하나 정리해 볼게요!

반응형

---

1. 프로젝트 폴더 생성

바탕화면에 프로젝트용 폴더를 만듭니다.

---

2. 리액트 앱 생성

Next.js 프로젝트를 생성합니다.

npx create-next-app ./

---

3. Github Pages 준비하기

 

3-1. gh-pages 패키지 설치

배포를 위해 Github Pages용 패키지를 설치해 줍니다.

yarn add -D gh-pages
# or
npm i --save-dev gh-pages

 

3-2. package.json 수정

프로젝트를 Github Pages에 배포하려면 package.json 파일에 다음과 같은 설정을 추가해줘야 해요.

"homepage": "https://사용자아이디.github.io/레포지토리명",
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
}

 

3-3. 환경 변수 설정 (.env.production)

assetPrefix 설정을 위해 .env.production 파일에 다음과 같은 내용을 추가합니다.

ASSET_PREFIX="/레포지토리명"

 

3-4. next.config.js 설정

next.config.js 파일에 다음 내용을 추가하여 환경 변수를 사용하도록 설정합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export",
  assetPrefix: process.env.ASSET_PREFIX || "",
  env: {
    ASSET_PREFIX: process.env.ASSET_PREFIX || "",
  },
};

module.exports = nextConfig;

---

4. 빌드 및 배포

4-1. 빌드하기

코드를 commit & push 한 뒤, 배포 준비를 마친 후 다음 명령어로 빌드합니다.

npm run build

 

 

4-2. 배포하기

빌드가 완료되면 다음 명령어로 배포합니다.

npm run deploy

 

4-3. 브랜치 변경

Build and deployment 항목에서 Branch를 gh-pages로 변경해 줍니다.

---

 

5. 이미지 사용하기

 

public 폴더에 이미지를 넣고, 아래와 같이 이미지를 불러올 수 있어요.

import Image from "next/image";

...

<Image
  aria-hidden
  src={`${process.env.ASSET_PREFIX}/file.svg`}
  alt="File icon"
  width={16}
  height={16}
/>

---

이렇게 하면 Next.js 프로젝트를 Github에 배포하는 준비가 끝났습니다! 😊

도움이 되었으면 좋겠어요 🥰