Github 페이지로 React Next.js 앱을 배포하는 방법

GitHub 페이지의 정적 특성과 Next.js의 동적 기능으로 인해 Next.js 앱을 GitHub 페이지에 배포하는 것은 약간 까다로울 수 있습니다. 이 문서에서는 성공적으로 배포하기 위한 단계를 안내해 드리겠습니다.

전제조건

• GitHub 계정
• 컴퓨터에 Node.js와 npm이 설치되어 있습니다
• 배포 준비가 완료된 Next.js 프로젝트

1단계: gh-pages 설치

npm install gh-pages --save-dev

2단계: next.config.mjs 업데이트

다음으로 기본 경로와 자산 접두어를 올바르게 처리하려면 next.config.js(또는 next.config.mjs) 파일을 업데이트해야 합니다.

const isProd = process.env.NODE_ENV === 'production';
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true, // Disable default image optimization
  },
  assetPrefix: isProd ? '/your-repository-name/' : '',
  basePath: isProd ? '/your-repository-name' : '',
  output: 'export'
};

export default nextConfig;

isProd는 NODE_ENV 환경 변수가 'production'으로 설정되어 있는지 확인합니다. 그렇다면 isProd는 true가 됩니다. 그렇지 않으면 거짓이 됩니다.
조건부 assetPrefix 및 basePath는 isProd가 true인 경우에만 저장소 이름으로 설정됩니다. 그렇지 않으면 로컬 개발을 위해 빈 문자열로 설정됩니다.
Images.unoptimized 옵션은 정적 내보내기와 호환되지 않는 기본 이미지 최적화를 비활성화하기 위해 true로 설정됩니다.

3단계: package.json 업데이트

홈페이지 필드와 배포 스크립트를 포함하도록 package.json을 업데이트하세요.

"homepage": "https://<your-github-username>.github.io/<your-repo-name>",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d out"
  },

및를 GitHub 사용자 이름과 저장소 이름으로 바꾸세요.

4단계: 앱 배포

npm run predeploy 및 npm run 배포 실행

이 명령은 다음을 수행합니다.

• 프로젝트를 구축하세요.
• out 디렉터리로 내보냅니다.
• GitHub의 gh-pages 브랜치에 배포하세요. 다음 단계를 진행하기 전에 작업 내용을 GitHub 브랜치로 푸시하세요

5단계: GitHub 페이지 구성

GitHub 저장소로 이동하세요.
설정 > 페이지.
소스에서 gh-pages 분기를 선택하세요.
설정을 저장합니다.
GitHub의 gh-pages 브랜치 루트에 .nojekyll 파일을 수동으로 추가하세요. 이에 대한 자세한 내용은 여기에서 알아보세요.

6단계: 배포 확인

배포한 후 GitHub 페이지 URL(예: https://.github.io/)을 열어 앱이 활성화되었는지 확인하세요.

그리고 짜잔!

궁금한 점이나 의견이 있으시면 아래에 남겨주세요. 즐거운 코딩하세요!

위 내용은 Github 페이지로 React Next.js 앱을 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!