Next.js 15 Fullstack Web Apps · Pelajaran

Dasar Halaman, Tata Letak, dan Perutean

Jelajahi App Router, tentukan halaman, buat tata letak bersama, dan berpindah antar-rute dalam aplikasi Anda.

Dasar Halaman, Tata Letak, dan Perutean adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 3 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 Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Welcome to App Router

The App Router is Next.js 15's routing system, built on React Server Components. It lets you co-locate components, styles, and tests by route.

Routes from Your Files

Routing is filesystem-based: your folder structure inside app/ directly defines your URLs, keeping the project predictable.

Defining a Page

A page.js file inside a folder makes that route render. It exports the React component shown when a user visits that URL.

Code: Simple Page

Create app/page.js and it automatically becomes your home page at the / route. Here is the component that renders there.

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

Organizing with Nested Routes

Build nested routes by nesting folders in app/ — each folder is a URL segment, so app/dashboard/settings/ maps to /dashboard/settings.

Code: Nested Page

To serve /dashboard/settings, create that folder path with a page.js inside. The file's component renders at that URL.

// app/dashboard/settings/page.js
export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>Manage your preferences here.</p>
    </div>
  );
}

Shared UI with Layouts

A layout (layout.js) is shared UI that wraps the pages in its segment — ideal for navbars, sidebars, and footers via the children prop.

Code: Root Layout

Every App Router project needs a root layout.js. It defines the base HTML — the <html> and <body> tags around your whole app.

// app/layout.js
import './globals.css'; // Global styles (optional)

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>Home | About</nav>
        </header>
        <main>{children}</main> {/* Page content goes here */}
        <footer>&copy; 2024 CoddyKit</footer>
      </body>
    </html>
  );
}

Nested Layouts

Nested layouts apply only to their folder and subfolders, inheriting from parent layouts — so you can build hierarchical UI per section.

Linking Between Pages

Navigate with the <Link> component from next/link. It behaves like an anchor but does client-side routing — no full page reload.

// app/page.js (example usage)
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>Go to the <Link href="/about">About Us</Link> page.</p>
      <p>Or visit your <Link href="/dashboard">Dashboard</Link>.</p>
    </div>
  );
}

Routing & Layouts Check

Which of the following statements about Next.js 15 App Router are TRUE?

Recap: Pages, Layouts & Routing

You learned the App Router: folders define routes, page.js renders content, layout.js shares UI, and <Link> handles fast navigation.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar Halaman, Tata Letak, dan Perutean” gratis?

Ya — teks lengkap “Dasar Halaman, Tata Letak, dan Perutean” 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 Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar Halaman, Tata Letak, dan Perutean”?

Jelajahi App Router, tentukan halaman, buat tata letak bersama, dan berpindah antar-rute dalam aplikasi Anda. Kamu berlatih Next.js 15 Fullstack Web Apps 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 Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps 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 3 dari 4.

Berapa lama pelajaran “Dasar Halaman, Tata Letak, dan Perutean” 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 Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps 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

← Kembali ke Next.js 15 Fullstack Web Apps