Next.js로 배포해보는 gh-pages

CRA 배포하듯이 Next.js 환경에서 배포할 수 있다면 얼마나 좋을까?

야심차게 배포한 프로젝트가 빈 화면만 나왔었다.

놀란 마음에 개발자 도구를 살펴보니 빌드된 프로젝트의 index.html에서 불러오는 js 파일이나 스타일시트, img 태그의 소스 등 많은 요소의 경로가 문제였다.

<script src="/YOUR-PROJECT-NAME/static/chunks/SOMETHING.js" defer></script>

 

당연히 콘솔에선 404오류가 났었다, url 앞에 호스트 주소를 써주는 등의 prefix 작업을 해줘야하는 것.

열심히 구글링해보니 이런 문제는 context를 뿌려줘서 해결할 수 있었다.

 

1. Prefix 적용

📂 asset prefix 설정

next.config.js 파일에 assetPrefix 속성을 추가한다.

이 설정은 css 설정 중 경로와 관련된 속성값 앞에 해당 문자열을 붙여준다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  exportTailingSplash: true,
  assetPrefix: process.env.NODE_ENV === "production" ? "https://howdyfrom2019.github.io/3d-web" : ""
}

module.exports = nextConfig

 

따로 env 설정해줄 필요없이 바로 넣어줘도 괜찮다.

어디에 있는진 발견 못했지만, "production" | "development" | "test" 세 가지 중 nodejs가 알아서 넣어준다.

우린 production으로 설정해주면 된다.

 

⚙️ Context를 사용한 src prefix

https://ko.reactjs.org/docs/context.html

Context – React

assets(img 태그의 src 등)를 설정해줘야한다.

React의 createContext를 사용해보자. 완전 redux랑 똑같다. (근데 이제 state 하나 씩 관리해야하는..)

 

/context/context.ts

import React from "react";

const ProjectContext = React.createContext<{ prefix: string }>({ prefix: ""});

export const ProjectProvider = ProjectContext.Provider;
export const ProjectConsumer = ProjectContext.Consumer;

export default ProjectContext;

 

/config/config.ts

export const prefix =
  process.env.NODE_ENV === "production" ? "https://howdyfrom2019.github.io/3d-web" : "";

 

이제 최상단인 _app.tsx에서 provider를 사용해 뿌려주면 된다.

 

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import {ProjectProvider} from "../context/context";
import {prefix} from "../config/config";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ProjectProvider value={{ prefix }}>
      <Component {...pageProps} />
    </ProjectProvider>
  )
}

 

ProjectProvider의 prefix가 string 형태가 아니라 object 형태로 들어가기 때문에, 해당  타입만 잘 맞춰서 적어주면 된다.

이렇게 넣어주고 이제 빌드를 해보자.

 

2. 새로운 scripts 추가.(for Windows)

항상 google 자료 찾으면 이런건 꼭 Mac 기준으로 적혀있다. 우리 Windows를 위해 새로운 script를 넣어주자.

일단 먼저 shx를 설치해주자.

npm i shx -D

 

이어서 package.json에 deploy 명령어를 넣어주자.

 

package.json

"scripts": {
  "deploy": "shx rm -rf node_modules/.cache && next build && next export && shx type nul > out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
},

bash 명령어	description
shx rm -rf node_modules/.cache	node_modules의 캐시를 지워줌.
next build	next 프로젝트를 빌드함.
next export	/out/에 build한 결과물을 내보냄.
shx type nul > out/.nojekyll	.nojekyll파일을 만들어줌. for github page
git add out/	/out/ 폴더를 git에 반영.
git commit -m \"Deploy Next.js to gh-pages\"	커밋 메시지.
git subtree push --prefix out origin gh-pages	gh-pages branch로 push.

 

npm run deploy를 실행하면 static web 완료!

앞에 prefix도 잘 들어간게 확인된다.

 

https://howdyfrom2019.github.io/3d-web/

https://howdyfrom2019.github.io/3d-web/

 

---

🌐참고 자료

https://velog.io/@ricale/next.js-%EB%A1%9C-GitHub-Pages-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

https://egg-programmer.tistory.com/281

https://hhyemi.github.io/2021/05/26/nextGit.html