React & Next.js — Aplikasi web berprestasi tinggi
Kami menggunakan React 18 dan Next.js 15 (App Router) untuk semua projek frontend: daripada laman web pengenalan hingga SaaS kompleks yang melayani puluhan ribu pengguna. Kod ditulis dalam TypeScript yang ketat, ujian diautomasikan.
Mengapa Next.js untuk projek kami
Next.js 15 dengan App Router menawarkan model hibrid yang unik: halaman statik (SSG) dihidangkan serta-merta dari CDN, halaman dinamik berjalan sebagai Server Components yang tidak menghantar JavaScript yang tidak perlu ke pelayar, dan halaman masa nyata menggunakan Client Components yang terasing. Konfigurasi lalai sudah merangkumi pengoptimuman ini, tanpa helah tambahan.
Imej dioptimumkan secara automatik melalui komponen `<Image>` (WebP/AVIF, srcSet responsif, lazy-loading), fon disisipkan dalam CSS kritikal dengan `next/font`, dan skrip pihak ketiga dimuatkan dengan strategi keutamaan. Bersama-sama, pengoptimuman ini menyasarkan metrik Core Web Vitals, terutamanya LCP.
- Server Components untuk halaman pemasaran — tiada JS klien, HTML penuh untuk perangkakan
- Streaming SSR dengan Suspense untuk papan pemuka dengan data langsung
- Incremental Static Regeneration (ISR) untuk kandungan separa dinamik
- Route Groups dan Parallel Routes untuk susun atur kompleks tanpa render semula
TypeScript ketat — tiada pepijat senyap
Semua projek kami menggunakan TypeScript dengan `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` dan `noUncheckedIndexedAccess`. Tetapan ini menyekat keseluruhan kategori pepijat masa jalan pada waktu kompilasi: akses undefined, jenis tidak lengkap pada respons API, perbandingan yang salah. Sesuatu projek biasa mempunyai 0 ralat TypeScript dalam CI sebelum sebarang ujian.
Untuk pengurusan state kami menggunakan Zustand (ringan, tanpa boilerplate) atau React Context untuk state setempat. Pengambilan data dikendalikan melalui TanStack Query (cache automatik, pembatalan pintar, stale-while-revalidate). Borang menggunakan React Hook Form + pengesahan skema Zod — pengesahan segerak dan tak segerak tanpa kod berganda.
- ESLint dengan peraturan tersuai untuk corak yang dilarang (any, console.log, magic strings)
- Prettier dengan konfigurasi seragam — tiada PR ditolak kerana pemformatan
- Zod untuk pengesahan masa jalan data daripada API luaran
- Alias laluan (`@/components/...`) — import bersih tanpa `../../..`
Ujian automatik dan CI/CD
Ujian unit dengan Vitest (pantas, serasi API Jest), ujian komponen dengan React Testing Library, E2E dengan Playwright pada 3 pelayar (Chromium, Firefox, WebKit). Saluran paip GitHub Actions menjalankan semua ujian pada setiap PR; penggabungan disekat jika ada yang gagal. Liputan minimum 80% pada logik perniagaan.
- Lighthouse CI — skor <90 menyekat penerapan staging
- Penganalisis bundle automatik — amaran jika bundle membesar >5% berbanding main
- Storybook untuk komponen UI — dokumentasi visual yang hidup
Kelebihan dan kekurangan
Kelebihan
- Pengoptimuman lalai untuk imej, fon dan skrip, tanpa penalaan manual.
- SSR dan SSG asli — HTML penuh tersedia untuk perangkak carian dan pengekstrak kandungan.
- TypeScript ketat menangkap pepijat semasa kompilasi, bukan dalam pengeluaran.
- Ekosistem matang: Vercel, ribuan pakej, komuniti besar.
Had
- Keluk pembelajaran App Router dan Server Components agak curam.
- Perubahan yang memecahkan kerap berlaku antara versi major — memerlukan penyelenggaraan.
- Untuk laman statik ringkas, Next.js mungkin berlebihan berbanding HTML biasa.
- Build besar meningkatkan masa kompilasi dan kos CI.
Rumusan ringkas
Pilih React & Next.js untuk laman web dan aplikasi web yang mesti pantas, boleh diindeks dan berskala. Untuk satu halaman pendaratan statik tanpa interaktiviti, alat yang lebih ringkas sudah memadai.
Jadual spesifikasi
| Keupayaan | Had / ambang | Kegunaan biasa | |
|---|---|---|---|
| Perenderan | SSR, SSG, ISR, CSR | Server Components mengehadkan API pelayar | Pemasaran statik + papan pemuka dinamik |
| Prestasi | Metrik Core Web Vitals: LCP, CLS, INP | JS hidrasi bertambah dengan interaktiviti | Laman trafik tinggi dan kritikal SEO |
| Penskalaan | Puluhan ribu pengguna, CDN edge | Memerlukan pengehosan Node atau serverless | SaaS, portal, e-dagang |
| Kos biasa | Sumber terbuka, pengehosan dari ~€0 | Fungsi serverless dibilkan mengikut penggunaan | Daripada projek kecil hingga enterprise |
Next.js berbanding alternatif
| Kriteria | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG dalam satu rangka kerja | Ya, asli | Separa (Nuxt ya, Vite tidak) |
| Ekosistem React | Penuh | Vue (Nuxt) atau berbilang rangka kerja (Astro) |
| Terbaik untuk laman statik tulen | Baik | Astro lebih ringan |
Soalan lazim
Mengapa Next.js dan bukan React biasa (Vite)?
React dengan Vite hanya merender pada klien, jadi HTML awal kosong — kurang baik untuk SEO dan GEO. Next.js menambah SSR dan SSG, menghantar HTML penuh yang boleh dibaca serta-merta oleh perangkak carian.
Adakah Next.js bagus untuk SEO?
Ya. SSR/SSG menghantar HTML yang boleh diindeks, metadata dan JSON-LD dijana di pelayan, dan Next.js menyediakan kawalan untuk imej, fon dan skrip bagi Core Web Vitals — kedua-duanya faktor yang dinilai oleh enjin carian.
Bolehkah saya memindahkan laman sedia ada ke Next.js?
Boleh, secara berperingkat: halaman dipindahkan satu demi satu, dengan mengekalkan URL dan ubah hala 301 supaya kedudukan Google tidak hilang.
Pengehosan apa yang diperlukan Next.js?
Halaman statik berjalan pada mana-mana CDN. Ciri dinamik (SSR, API routes) memerlukan Node.js atau runtime serverless seperti Vercel, Netlify atau kontena Docker.