teps untuk menggunakan apl React Next.js anda dengan halaman Github

Menetapkan apl Next.js ke GitHub Pages boleh menjadi agak rumit kerana sifat statik Halaman GitHub dan ciri dinamik Next.js. Dalam artikel ini, saya akan membimbing anda melalui langkah-langkah untuk melaksanakannya dengan jayanya.

Prasyarat

• Akaun GitHub
• Node.js dan npm dipasang pada mesin anda
• Projek Next.js sedia untuk digunakan

Langkah 1: Pasang gh-pages

npm pasang gh-pages --save-dev

Langkah 2: Kemas kini next.config.mjs

Seterusnya, anda perlu mengemas kini fail next.config.js (atau next.config.mjs) anda untuk mengendalikan laluan asas dan awalan aset dengan betul.

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 menyemak sama ada pembolehubah persekitaran NODE_ENV ditetapkan kepada 'pengeluaran'. Jika ya, isProd akan menjadi benar; jika tidak, ia akan menjadi palsu.
AssetPrefix dan basePath bersyarat ditetapkan kepada nama repositori anda hanya jika isProd adalah benar. Jika tidak, ia ditetapkan kepada rentetan kosong untuk pembangunan tempatan.
Pilihan images.unoptimized ditetapkan kepada benar untuk melumpuhkan pengoptimuman imej lalai, yang tidak serasi dengan eksport statik.

Langkah 3: Kemas kini package.json

Kemas kini package.json anda untuk memasukkan medan halaman utama dan skrip penggunaan.

"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"
  },

Ganti dan dengan nama pengguna GitHub dan nama repositori anda.

Langkah 4: Pasang Apl Anda

Jalankan npm run predeploy dan npm run deploy

Arahan ini akan:

• Bina projek anda.
• Eksport ke direktori keluar.
• Sebarkannya ke cawangan gh-pages di GitHub. Tolak kerja anda ke cawangan GitHub anda sebelum langkah seterusnya

Langkah 5: Konfigurasikan Halaman GitHub

Pergi ke repositori anda di GitHub.
Navigasi ke Tetapan > Halaman.
Di bawah Sumber, pilih cawangan gh-pages.
Simpan tetapan.
Tambahkan secara manual fail .nojekyll pada akar cawangan gh-pages pada GitHub. Ketahui lebih lanjut tentang perkara ini di sini.

Langkah 6: Sahkan Penggunaan

Selepas mengatur letak, buka URL Halaman GitHub anda (cth., https://.github.io/) untuk mengesahkan bahawa apl anda disiarkan secara langsung.

Dan voila!

Sila tinggalkan sebarang soalan atau komen di bawah. Selamat mengekod!

Atas ialah kandungan terperinci teps untuk menggunakan apl React Next.js anda dengan halaman Github. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!