React Academy · Pelajaran

Konvensi File App Router

Pahami direktori app/, serta file page.tsx, layout.tsx, loading.tsx, dan error.tsx.

Konvensi File App Router adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Direktori app/

Router Aplikasi Next.js menggunakan direktori app/. Folder menentukan segmen URL, sedangkan berkas khusus di dalam folder menentukan perilaku untuk setiap segmen.

page.tsx — Antarmuka Rute

page.tsx mengekspor komponen React yang dirender untuk segmen URL. Tanpa page.tsx, rute tersebut tidak dapat diakses publik.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Kerangka Persisten

layout.tsx membungkus rute turunan. Kerangka ini tetap ada selama navigasi—statusnya tidak diatur ulang saat rute turunan berubah.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Antarmuka Pemuatan Instan

loading.tsx langsung merender antarmuka saat data asinkron halaman dimuat. Berkas ini membungkus halaman dalam batas Suspense otomatis.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Batas Kesalahan

error.tsx adalah batas kesalahan React untuk segmen tersebut. Berkas ini menerima kesalahan dan fungsi reset untuk mencoba lagi.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — Antarmuka 404

not-found.tsx merender antarmuka saat notFound() dipanggil dari komponen server atau saat tidak ada rute yang cocok.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Tata Letak yang Dipasang Ulang

template.tsx mirip dengan layout.tsx, tetapi membuat instans baru pada setiap navigasi—status diatur ulang dan efek dijalankan kembali. Gunakan untuk animasi atau analitik.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Rute API

route.ts (bukan route.tsx) mengekspor pengendali metode HTTP (GET, POST, dan lainnya) untuk membuat titik akhir API di dalam direktori app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Perangkat Tengah Edge

middleware.ts di akar proyek berjalan sebelum setiap permintaan yang cocok di edge—digunakan untuk pemeriksaan autentikasi, pengalihan, dan penulisan ulang header.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Kolokasi

Anda dapat menempatkan file non-rute secara berdampingan (komponen, utilitas, pengujian) di dalam folder app/. Hanya file yang diberi nama sesuai konvensi khusus (page, layout, dan lainnya) yang diperlakukan sebagai segmen rute.

Tata Letak Bersarang

Setiap folder dapat memiliki layout.tsx sendiri. Tata letak bersarang hanya membungkus anak-anak segmennya, lalu menyusunnya bersama tata letak induk di atasnya.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Pemeriksaan Singkat

File Perute Aplikasi mana yang menyediakan fallback Suspense otomatis saat data asinkron halaman dimuat?

Ringkasan

Perute Aplikasi menggunakan file khusus: page.tsx (antarmuka rute), layout.tsx (kerangka persisten), loading.tsx (fallback Suspense), error.tsx (batas kesalahan), not-found.tsx (404), route.ts (API), dan middleware.ts (logika edge).

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konvensi File App Router” gratis?

Ya — teks lengkap “Konvensi File App Router” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Konvensi File App Router”?

Pahami direktori app/, serta file page.tsx, layout.tsx, loading.tsx, dan error.tsx. Kamu berlatih React Academy 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy 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 1 dari 4.

Berapa lama pelajaran “Konvensi File App Router” 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 React Academy ini?

Ya. Setiap pelajaran React Academy 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 React Academy