Apa yang Ditambahkan Next.js
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 1 dari 47.
Kamu sudah bisa membuat komponen dengan React. Jadi, mengapa hampir setiap aplikasi React sungguhan menggunakan framework di atasnya?
Karena React sendiri hanya melakukan satu hal: mengubah komponenmu menjadi tampilan di layar. Hal lainnya, kamu bangun sendiri:
- Halaman dan URL: React tidak tahu apa itu URL
- Mengambil data: kamu mengambilnya di browser, setelah halaman selesai dimuat
- Menyimpan data: kamu menulis API secara manual
Next.js mengisi tepat celah-celah tersebut. Jawabannya sangat lugas:
- Sebuah folder adalah URL
- Komponen berjalan di server secara default, sehingga dapat memuat data sebelum halaman dikirim
- Sebuah fungsi dapat menyimpan data, tanpa perlu menulis API
Poin terakhir itu perlu kita bahas sejenak. Dalam kursus ini, kamu akan mengambil data dengan await biasa di dalam komponen, tanpa spinner pemuatan dan tanpa useEffect, karena komponen dijalankan di server sebelum pengguna melihat apa pun.
Semua yang kamu pelajari di Fundamentals tetap berlaku: komponennya sama, props-nya sama, JSX-nya sama. Next.js adalah kerangka yang membangun semuanya.
Tantangan
PemulaIni halaman Next.js pertamamu, sudah dibuat untukmu.
Yang perlu kamu lakukan:
- Lihat lokasi file:
app/page.jsx. - Tekan tombol Jalankan.
- Pratinjau menampilkan halaman itu di URL
/.
Tidak ada yang mendaftarkan rute itu: folderlah yang melakukannya. Inilah gagasan yang menjadi dasar seluruh bagian ini.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
