Mencipta dan Menjalankan Projek Next.js dalam ServBay

Pengenalan

Next.js ialah rangka kerja React yang berkuasa yang dibangunkan dan diselenggara oleh Vercel. Ia digunakan secara meluas untuk membina aplikasi web moden yang berprestasi tinggi. Next.js menawarkan pelbagai ciri sedia guna di atas React, sekali gus memudahkan proses pembangunan aplikasi kompleks.

Apakah itu Next.js?

Next.js merupakan rangka kerja React sumber terbuka yang popular dan menyokong pelbagai mod rendering seperti rendering sisi pelayan (SSR) serta generasi laman statik (SSG). Ciri-ciri ini membantu meningkatkan prestasi aplikasi, pengalaman pengguna, serta kebolehnampakan laman pada enjin carian. Next.js juga menyediakan penciptaan laluan automatik berdasarkan sistem fail, laluan API, pemisahan kod automatik, sokongan modul CSS, dan banyak lagi, untuk pengalaman pembangunan yang menyeluruh.

Ciri Utama & Kelebihan Next.js

Sokongan Pelbagai Strategi Rendering: Menyokong SSR, SSG, rendering sisi klien (CSR), serta rendering hibrid. Anda boleh memilih mod yang paling sesuai berdasarkan keperluan projek.
Laluan Berasaskan Sistem Fail: Laluan dijana secara automatik berdasarkan struktur direktori pages atau app, mudah dan jelas.
Laluan API: Bina endpoint API secara terus dalam projek Next.js, memudahkan pembangunan fullstack.
Pemisahan Kod Automatik: Pemisahan di peringkat halaman — hanya JavaScript yang diperlukan dimuatkan bagi setiap halaman, mempercepat masa muat.
Komponen Gambar yang Dioptimumkan (next/image): Pengoptimuman automatik saiz, format & strategi pemuatan gambar.
Sokongan CSS dan Sass Terbina: Pengurusan dan penulisan gaya menjadi lebih mudah.
Fast Refresh: Pembaruan kod secara serta-merta semasa pembangunan.

Dengan Next.js, anda boleh membangunkan aplikasi web yang moden, berprestasi tinggi, boleh diskala serta mudah diselenggara dengan lebih cekap.

Menjalankan Projek Next.js dalam ServBay

ServBay menyediakan persekitaran pembangunan web tempatan yang bersepadu, lengkap dengan Node.js dan pelbagai bahasa/alat lain. Melalui persekitaran Node.js serta fungsi Pengurusan Laman (termasuk proksi terbalik dan servis fail statik) dalam ServBay, anda boleh mencipta, membangun, dan men-deploy projek Next.js dengan sangat mudah.

Panduan ini akan membantu anda untuk mencipta projek Next.js, menjalankan mod pembangunan (melalui proksi terbalik), serta deployment mod produksi (melalui servis fail statik) menggunakan ServBay.

Prasyarat

Pastikan anda telah melengkapkan perkara berikut sebelum bermula:

ServBay telah dipasang pada sistem macOS anda.
Node.js telah dipasang & diaktifkan melalui antara muka pengurusan Pakej Perisian dalam ServBay. Jika belum memasang Node.js, sila rujuk dokumentasi Menggunakan Persekitaran Node.js ServBay.

Langkah-Langkah

1. Cipta Projek Next.js

Pertama sekali, kita perlu memulakan projek Next.js yang baharu.

Buka Terminal dan tukar ke direktori root laman web ServBay:
bash
```
cd /Applications/ServBay/www
```
1
Inisialisasi projek dengan create-next-app: Jalankan perintah berikut untuk mencipta projek Next.js baru. Kami syorkan nama projek servbay-next-app — satu folder dengan nama sama akan dicipta di /Applications/ServBay/www.
bash
```
npx create-next-app@latest servbay-next-app
```
1
npx ialah alat untuk menjalankan perintah pakej Node.js secara terus. create-next-app@latest akan menggunakan versi terbaru alat inisialisasi Next.js. Ikuti arahan di terminal untuk tetapan projek (pilihan TypeScript, ESLint, Tailwind CSS, App Router, dsb).
Masuk ke direktori projek dan pasang keperluan:
bash
```
cd servbay-next-app
npm install
```
1
2
Perintah npm install akan memasang semua pakej kebergantungan yang disenaraikan dalam package.json projek.

2. Ubah Kandungan Output Projek (Pilihan)

Untuk mengesahkan bahawa projek berjaya dijalankan, kita boleh mengubah halaman utama projek.

Buka fail pages/index.js (jika anda memilih Pages Router). Jika menggunakan App Router, sunting app/page.js. Di sini guna Pages Router sebagai contoh:
bash
```
# Gunakan editor pilihan anda, sebagai contoh VS Code
code pages/index.js
```
1
2
Ubah kandungan fail supaya laman memaparkan "Hello ServBay!". Tukar atau gantikan isi fail seperti berikut:
javascript
```
// pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>Laman ini dijalankan melalui ServBay.</p>
    </div>
  );
}
```
1
2
3
4
5
6
7
8
9
Jika anda menggunakan App Router (app/page.js), struktur fail mungkin sedikit berbeza tetapi konsep mengubah kandungan <h1> adalah sama.

3. Jalankan Mod Pembangunan

Semasa pembangunan, biasanya anda akan menggunakan pelayan pembangunan Next.js, yang menyokong hot module replacement (HMR) serta pembaruan kod pantas. Fungsi proksi terbalik ServBay sangat sesuai untuk menghubungkan domain tempatan dengan pelayan pembangunan yang sedang berjalan.

Jalankan pelayan pembangunan Next.js: Dalam root projek (/Applications/ServBay/www/servbay-next-app), jalankan:
bash
```
npm run dev -- -p 8585
```
1
Ini akan memulakan pelayan pembangunan Next.js pada port 8585. Anda boleh menggunakan port lain yang tidak digunakan.
Konfigurasi Laman ServBay (Proksi Terbalik): Buka antara muka aplikasi ServBay, masuk ke pengurusan Laman Web. Klik untuk tambah laman baru, set kan:
- Nama: My first Next.js dev site (atau sebarang nama pilihan)
- Domain: servbay-next-dev.servbay.demo (galakkan gunakan akhiran .servbay.demo untuk domain tempatan)
- Jenis Laman Web: Pilih Reverse Proxy
- IP Sasaran Proksi: 127.0.0.1 (alamat loopback tempatan)
- Port Sasaran Proksi: 8585 (sama dengan port pelayan pembangunan Next.js)
Selepas konfigurasi disimpan dan perubahan digunakan, ServBay akan secara automatik setkan Caddy atau Nginx (bergantung pada tetapan ServBay anda) untuk mengendalikan permintaan ke servbay-next-dev.servbay.demo lalu meneruskannya ke 127.0.0.1:8585.
Langkah lebih lanjut boleh dirujuk dalam Menambah Laman Pembangunan Node.js Dalam ServBay.
Akses laman pembangunan: Buka pelayar web dan lawati domain yang anda tetapkan, seperti https://servbay-next-dev.servbay.demo.
Kerana ServBay secara lalai menyokong dan mengkonfigurasi sijil SSL untuk domain tempatan (menggunakan ServBay User CA), anda boleh mengakses laman pembangunan anda melalui HTTPS dengan selamat — tanpa amaran pelayar. ServBay membolehkan domain tersuai & SSL percuma secara automatik, sangat memudahkan dalam pembangunan tempatan.

4. Bina Versi Produksi dan Deploy Sebagai Laman Statik

Setelah projek Next.js anda siap untuk deploy, langkah seterusnya ialah membina versi produksi yang sudah dioptimumkan. Untuk projek Next.js yang dihasilkan secara statik (output: 'export' atau menggunakan next export), servis fail statik ServBay adalah pilihan terbaik.

Bina projek Next.js dan eksport sebagai fail statik: Dalam root projek (/Applications/ServBay/www/servbay-next-app), jalankan:
bash
```
npm run build
npm run export
```
1
2
- npm run build akan kompilasi kod projek, menghasilkan versi produksi yang dioptimumkan dan disimpan dalam direktori .next.
- npm run export (bergantung pada konfigurasi Next.js atau versi terdahulu) atau tetapan output: 'export' akan mengeksport aplikasi siap bina ke dalam fail HTML, CSS, dan JavaScript statik dalam folder out.
Konfigurasi Laman ServBay (Servis Fail Statik): Buka aplikasi ServBay, pergi ke pengurusan Laman Web. Tambah laman baru dengan tetapan:
- Nama: My first Next.js production site (atau sebarang nama)
- Domain: servbay-next-prod.servbay.demo (akhiran .servbay.demo digalakkan)
- Jenis Laman Web: Pilih Static
- Root Laman Web: Masukkan path penuh ke direktori out Next.js anda, iaitu /Applications/ServBay/www/servbay-next-app/out.
Selesai. ServBay kini menyediakan servis statik secara langsung dari /Applications/ServBay/www/servbay-next-app/out.
Akses laman produksi: Buka pelayar web dan lawati domain https://servbay-next-prod.servbay.demo. Anda akan dapat melihat isi laman statik Next.js yang telah siap.
Seperti sebelumnya, melalui konfigurasi domain tersuai dan SSL automatik, laman produksi tempatan anda juga boleh diakses secara selamat menggunakan HTTPS.

Rumusan

Dengan mengikuti langkah-langkah di atas, anda telah berjaya mencipta projek Next.js dalam persekitaran pembangunan tempatan ServBay, memanfaatkan fungsi proksi terbalik untuk pratonton masa nyata dalam mod pembangunan, serta melakukan deployment versi produksi melalui servis fail statik. ServBay dengan persekitaran yang bersepadu dan pengurusan Laman Web yang mudah telah memudahkan lagi proses pembangunan dan ujian projek Next.js secara tempatan.

Mencipta dan Menjalankan Projek Next.js dalam ServBay ​

Pengenalan ​

Apakah itu Next.js? ​

Ciri Utama & Kelebihan Next.js ​

Menjalankan Projek Next.js dalam ServBay ​

Prasyarat ​

Langkah-Langkah ​

1. Cipta Projek Next.js ​

2. Ubah Kandungan Output Projek (Pilihan) ​

3. Jalankan Mod Pembangunan ​

4. Bina Versi Produksi dan Deploy Sebagai Laman Statik ​

Rumusan ​