🔥 회사일에 치이다가 이제야 개인 개발을 할 시간이 날 정도로 짬이 찼다. 🔥

협업프로젝트를 진행하면서 느낀건 Next.js 이놈 참 물건이라는 점이다.
물론 대부분의 회사가 React(or Vue)쓰라고 칼들고 협박 하기 때문에
그 안에서의 최선의 선택지로써 물건이라는 말이다.

때문에 내 개발 블로그도 Next.js를 사용 할 것이다.

자신만의 커스텀 블로그를 만들 사람들에게 많은 도움이 됐으면 한다.

NextJS + Github hosting

NextJS 환경세팅

1. 먼저 NextJS 프로젝트를 만들어줍시다. (2023-03-14기준 -v 13)

npx create-next-app@latest {directory/name} --typescript
#or
yarn create next-app {directory/name} --typescript

2. gh-pages를 설치해줍니다.

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

3. 프로젝트 root디렉토리에 있는 package.json파일을 다음과 같이 수정합니다.

{
    "name": "Wooklogy-blog",
    "homepage": "https://Wooklogy.github.io/blog/",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add -f out/ && git commit -m '🚀deploy to gh-pages' && git subtree push --prefix out origin gh-pages",
        "lint": "next lint"
    },
    "dependencies": {
        "@types/node": "18.15.3",
        "@types/react": "18.0.28",
        "@types/react-dom": "18.0.11",
        "eslint": "8.36.0",
        "eslint-config-next": "13.2.4",
        "next": "13.2.4",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "typescript": "4.9.5"
    }
}

중요한 부분은 homepage와 deploy부분입니다.
홈페이지는 https://{github name}.github.io/{repo name}/ 패턴을 가지므로 참고하세요.
deploy에 작성한 작업은 다음과 같습니다.

1. rm -rf node_modules/.cache 노드모듈 캐시삭제
2. next build next 프로젝트 빌드
3. next export next 프로젝트의 페이지들을 정적파일(html)로 컴파일하여 out/ 폴더에 생성하는 작업
4. touch out/.nojekyll: Github페이지는 기본적으로 jekyll를 기본으로 사용하는데 이걸 사용하지 않는게 하기 위함
5. git subtree push —prefix out origin gh-pages github저장소 gh-pages 브랜치에 push하는 작업

4. next.config를 다음과 같이 수정합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    basePath: `/blog`,	// /{repo name}으로 작성하면됩니다. 만약 루트 레포라면 "/"만 작성하시면 됩니다.
};

module.exports = nextConfig;

5. deploy

yarn deploy로 초기 프로젝트를 빌드 한 후 push합니다.

6. Repository Setting

배포 끝!