Apa Itu Next.js? Panduan Ringkas untuk Pembina Aplikasi

Next.js ialah rangka kerja untuk membina laman web dan aplikasi web dengan React. React memberi anda blok binaan antara muka — butang, borang, senarai. Next.js menambah bahagian lain laman web di sekelilingnya: halaman dan URL, merender halaman di pelayan supaya ia sampai sudah sedia untuk dibaca, memuatkan data, dan menjalankan kod bahagian belakang dalam projek yang sama. Ia bersumber terbuka, dibangunkan oleh syarikat Vercel, dan merupakan salah satu cara paling meluas untuk membina laman React.

Mengapa Next.js penting apabila membina dengan AI

Apabila anda menerangkan aplikasi kepada pembina AI, ia perlu memilih asas teknikal. Pilihan itu membentuk perkara yang anda ambil berat kemudian:

• Keterlihatan carian. Laman awam yang perlu muncul dalam Google mendapat manfaat daripada menghantar HTML sebenar, dan Next.js melakukannya dengan baik.
• Di mana bahagian belakang berada. Next.js membolehkan halaman hadapan dan kod pelayan (seperti “simpan borang ini” atau “panggil API pembayaran”) berada dalam satu projek.
• Hosting. Aplikasi Next.js dengan ciri pelayan memerlukan pelayan untuk berjalan, manakala aplikasi Vite biasa boleh dihidangkan sebagai fail statik.

Mythex memulakan projek baharu dengan Vite + React + TypeScript + Tailwind secara lalai, dan menggunakan Next.js apabila anda memintanya — “Use Next.js” dalam gesaan pertama anda sudah memadai (cara teknologi dipilih). Jadi berguna untuk tahu bila ia berbaloi untuk diminta.

Analogi harian

Jika React ialah kotak bata Lego berkualiti tinggi, Next.js ialah set Lego dengan arahan, papan dasar dan bahagian untuk pintu dan paip yang sudah disertakan.

Anda boleh membina rumah yang sama daripada bata longgar — hanya anda perlu memutuskan sendiri bagaimana bilik bersambung, di mana pintu depan dan bagaimana air masuk. Next.js membuat keputusan itu untuk anda dengan cara piawai, jadi setiap projek Next.js mempunyai susun atur yang serupa, dan pembangun baharu (atau AI) boleh mencari jalannya dengan cepat.

Apa yang Next.js tambahkan kepada React

Next.js mempunyai dua cara untuk mengatur halaman. App Router (folder app/) ialah yang lebih baharu dan menyokong Server Components. Pages Router (folder pages/) ialah yang asal dan masih disokong. Projek baharu biasanya menggunakan App Router. Jika kod pembina AI anda atau tutorial kelihatan tidak biasa, inilah sebabnya selalunya.

Contoh kerja: direktori awam kafe tempatan

Bayangkan sebuah laman yang menyenaraikan kafe dalam bandar anda, dengan satu halaman setiap kafe, yang anda mahu muncul dalam hasil carian.

Halaman Next.js untuk satu kafe mungkin kelihatan lebih kurang seperti ini:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Apa yang berlaku apabila seseorang (atau Google) melawat /cafes/blue-door:

1. Next.js memadankan URL dengan fail itu. Folder [slug] bermaksud “mana-mana kafe”.
2. Komponen itu berjalan di pelayan, membaca kafe daripada pangkalan data dan membina HTML.
3. Pelayar menerima halaman lengkap dengan nama dan alamat kafe sudah berada di dalamnya — tiada menunggu JavaScript mengambil data.

Dengan aplikasi React pelanggan biasa, pelayar mula-mula menerima halaman yang hampir kosong, kemudian memuat turun JavaScript, kemudian mengambil kafe, kemudian memaparkannya. Enjin carian selalunya boleh mengendalikan itu, tetapi halaman yang lengkap lebih boleh dipercayai. Lihat SEO untuk laman web yang dibina AI.

Bandingkan dengan papan pemuka khusus kakitangan di sebalik log masuk: enjin carian tidak boleh melihatnya pun, jadi render pelayan memberi manfaat yang kecil, dan aplikasi Vite yang lebih ringkas selalunya lebih sesuai.

Istilah utama

Salah faham lazim

• “Next.js menggantikan React.” Tidak. Ia menggunakan React. Komponen anda masih komponen React.
• “Next.js sentiasa pilihan yang lebih baik.” Ia lebih berkeupayaan, tetapi juga lebih banyak yang perlu difahami. Render pelayan, caching dan perbezaan antara kod pelayan dan pelanggan ialah punca biasa pepijat yang membingungkan. Untuk aplikasi yang kebanyakannya berada di sebalik log masuk, aplikasi React biasa selalunya lebih ringkas.
• “Next.js hanya berjalan di Vercel.” Ia bersumber terbuka dan boleh berjalan di mana-mana pelayan Node.js atau dalam bekas Docker. Eksport statik sepenuhnya boleh dilakukan jika anda tidak menggunakan ciri pelayan.
• “Menggunakan Next.js menjamin SEO yang baik.” Ia memudahkan halaman yang boleh dibaca. Kedudukan tetap bergantung pada tajuk, kandungan, kelajuan dan pautan.
• “Kod pelayan dalam Next.js secara automatik peribadi.” Kod yang ditandakan untuk pelanggan akhirnya berada dalam pelayar. Rahsia mesti kekal dalam kod khusus pelayan dan pembolehubah persekitaran.

Apa yang perlu diminta kepada pembina AI anda

• “Gunakan Next.js dengan App Router” — dalam gesaan pertama anda, jika anda mahukannya.
• “Halaman mana yang dirender di pelayan, mana yang statik dan mana yang berjalan dalam pelayar — dan mengapa?”
• “Jadikan halaman pemasaran dan senarai awam dirender di pelayan atau statik, dengan tajuk dan penerangan yang betul.”
• “Simpan kunci API dalam kod khusus pelayan dan pembolehubah persekitaran. Tunjukkan di mana setiap satu dibaca.”
• “Adakah aplikasi ini memerlukan Next.js, atau aplikasi Vite + React akan lebih ringkas untuk apa yang kita bina?”

Next.js dalam Mythex

Mythex menggunakan Vite + React + TypeScript + Tailwind secara lalai dan bertukar kepada Next.js apabila anda memintanya dalam gesaan anda; menamakannya awal menjimatkan kredit berbanding menukarnya kemudian. Anda melihat aplikasi dalam Pratonton langsung, dan Publish menerbitkannya ke URL langsung tanpa anda perlu menyediakan hosting sendiri. Dokumentasi Mythex menyatakan bahawa aplikasi satu halaman yang dirender pelanggan mempunyai SEO yang lebih lemah berbanding HTML yang dirender pelayan atau statik, jadi jika carian penting untuk laman pemasaran, eloklah dinyatakan dari awal (SEO untuk aplikasi anda).

Soalan lazim