0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Dasar-Dasar Perutean Sistem Berkas

Pahami konsep dasar perutean berbasis sistem berkas dalam Next.js serta cara membuat halaman dan rute dasar.

Dasar-Dasar Perutean Sistem Berkas adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Pengantar File-System Routing

Next.js melakukan routing berdasarkan file system Anda — tata letak folder dan file Anda secara langsung menentukan URL Anda. File menjadi halaman, folder menjadi segmen URL.

Direktori Inti `app`

Setiap route berada di dalam direktori khusus app — root dari struktur situs Anda. Apa pun yang Anda letakkan di sana akan membentuk routing.

Membuat Halaman Root

Sebuah route membutuhkan page.js yang melakukan default-export sebuah komponen React. Letakkan langsung di app/ dan itu akan menjadi homepage Anda di /.

Halo Homepage Next.js!

Ini adalah app/page.js minimal. Komponen ini akan dirender di URL root Anda / — homepage yang pertama kali dilihat oleh pengunjung.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js homepage.</p>
    </div>
  );
}

Folder untuk Path Bersarang

Ingin route /dashboard? Buat folder dashboard di app/ dan letakkan page.js di dalamnya. Nama folder akan menjadi segmen URL.

Halaman Dashboard

Kode ini berada di app/dashboard/page.js. Kunjungi /dashboard dan Next.js akan merender komponen ini.

export default function DashboardPage() {
  return (
    <div>
      <h1>Your Dashboard</h1>
      <p>Here you'll find all your important stats.</p>
    </div>
  );
}

Route Bersarang Lebih Dalam

Bersaranglah sedalam yang Anda inginkan — setiap folder menambahkan segmen URL. Jadi, app/products/electronics/page.js akan memetakan ke /products/electronics. Bersih dan logis.

UI Bersama dengan `layout.js`

Sebuah layout.js mendefinisikan UI bersama yang membungkus halaman-halaman di dalam foldernya — sempurna untuk bilah navigasi, footer, dan sidebar yang tetap ada di seluruh route.

Kuis Pemetaan Route

Bayangkan Anda memiliki file yang terletak di app/blog/posts/page.js di dalam proyek Next.js Anda. Path URL apa yang akan sesuai dengan file ini?

Ringkasan File-System Routing

Ringkasan: direktori app adalah root untuk semua route, page.js mendefinisikan UI sebuah route, folder membuat segmen bersarang, dan layout.js berbagi UI di antara mereka.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Perutean Sistem Berkas” gratis?

Ya — teks lengkap “Dasar-Dasar Perutean Sistem Berkas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar Perutean Sistem Berkas”?

Pahami konsep dasar perutean berbasis sistem berkas dalam Next.js serta cara membuat halaman dan rute dasar. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Dasar-Dasar Perutean Sistem Berkas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Penyiapan Proyek & CLI
  2. Dasar-Dasar Perutean Sistem Berkas
  3. Ikhtisar Halaman & Tata Letak
  4. Menata Gaya Aplikasi Next.js Anda
← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)