Bikin Tampilan Keren: Pages dan Komponen di "Rumah" Next.js-mu!

Udah ngerti kan cara bikin rute (URL) dan link navigasi di Next.js pake App Router? Keren! Sekarang, pertanyaannya, apa sih yang sebenernya ditampilin pas pengguna ngakses rute itu? Di mana kita nulis kode buat UI-nya?

Jawabannya ada di Pages dan Komponen React biasa yang udah kita pelajari!

page.tsx: "Wajah Utama" Setiap Rute

Di Next.js App Router, setiap kali kamu bikin folder baru di dalam app/ buat nentuin segmen URL, kamu wajib punya file page.tsx (atau .js/.jsx) di dalam folder itu biar rute tersebut bisa diakses dan punya tampilan.

• page.tsx adalah sebuah React Component biasa! Kamu bisa bikin dia sebagai Functional Component yang nge-return JSX, sama persis kayak yang udah kita pelajari di panduan React dasar.
• Komponen inilah yang bakal ngerender UI utama buat segmen rute tersebut.
• Dia bisa ngimpor dan nggunain komponen-komponen React lain yang lebih kecil buat ngebangun tampilannya.

Contoh Sederhana src/app/profil/page.tsx:

// src/app/profil/page.tsx
import React from 'react';
import HeaderSederhana from '@/app/components/HeaderSederhana'; // Asumsi ada komponen Header
 
// Ini adalah React Component yang akan dirender untuk URL /profil
export default function HalamanProfil() {
  const namaPengguna = "Budi NextJS";
  const email = "budi.next@example.com";
 
  return (
    <div>
      <HeaderSederhana judul="Profil Saya" /> {/* Menggunakan komponen lain */}
      <article className="p-4">
        <h2 className="text-2xl font-semibold">{namaPengguna}</h2>
        <p className="text-gray-600">Email: {email}</p>
        <p className="mt-2">Ini adalah halaman profil sederhana yang dibuat dengan Next.js App Router!</p>
        {/* Kamu bisa nambahin komponen atau JSX lain di sini */}
      </article>
    </div>
  );
}

• Perhatiin import HeaderSederhana from '@/app/components/HeaderSederhana';. Alias @/ itu biasanya otomatis dikonfigurasi sama create-next-app buat nunjuk ke folder src/ (atau folder root proyek kalau gak pake src/). Ini bikin path impor jadi lebih pendek dan rapi.

Komponen React Reusable: Tetap Jadi Andalan!

Semua yang udah kamu pelajari soal bikin komponen React yang reusable (bisa dipake ulang) di panduan React dasar itu 100% berlaku dan penting banget di Next.js.

• Pecah UI Jadi Komponen Kecil: Daripada nulis semua JSX di satu file page.tsx yang panjang banget, praktik terbaiknya adalah mecah UI-mu jadi komponen-komponen kecil yang punya tanggung jawab spesifik.
  • Misalnya, kamu bisa bikin komponen <Tombol>, <KartuProduk>, <Navbar>, <FooterKonten>, <InputForm>, dll.
• Simpen Komponen di Folder Terpisah: Biasanya orang bikin folder src/components/ (atau app/components/ kalau kamu gak pake src/ sebagai root) buat nyimpen semua komponen reusable ini.
• Impor dan Pake di Mana Aja: Komponen-komponen ini bisa kamu impor dan pake di berbagai file page.tsx atau bahkan di dalam komponen lain.

Contoh Struktur dengan Komponen:

src/
└── app/
    ├── components/       # Folder buat komponen reusable
    │   ├── Tombol.tsx
    │   ├── Kartu.tsx
    │   └── Navbar.tsx
    ├── about/
    │   └── page.tsx      // Bisa pake <Navbar />, <Tombol />, <Kartu />
    ├── products/
    │   └── page.tsx      // Bisa pake <Navbar />, <Kartu />
    ├── layout.tsx        // Mungkin pake <Navbar /> dan <Footer />
    └── page.tsx          // Halaman utama, bisa pake komponen apa aja

Ini bikin kodemu jadi lebih modular, gampang di-maintain, dan gampang dites.

Server Components vs. Client Components di App Router: Perkenalan Super Dasar!

Nah, ini salah satu konsep baru dan penting di Next.js App Router yang beda sama React "polosan" atau Pages Router lama: pembedaan antara Server Components dan Client Components.

Ini agak teknis, tapi kita kenalan sama idenya dulu ya:

1. Server Components (Komponen Server) - Ini Defaultnya!

   • Di App Router, semua komponen yang kamu bikin di dalam folder app/ (termasuk page.tsx dan layout.tsx) itu secara default adalah Server Components.
   • Apa artinya?
     • Komponen ini di-render di sisi server (atau pas proses build buat halaman statis).
     • Mereka bisa langsung async/await buat ngambil data (misal, dari database atau API eksternal) di dalam fungsi komponennya, tanpa perlu useEffect atau useState buat data fetching awal. Keren kan?
     • Kode JavaScript buat Server Components gak dikirim ke browser klien. Ini bisa ngurangin ukuran bundle JavaScript yang di-download pengguna, jadi halaman bisa loading lebih cepet.
     • GAK BISA PAKE HOOKS YANG BUTUH INTERAKSI BROWSER: Karena jalan di server, Server Components gak bisa pake useState, useEffect, useContext (secara langsung untuk update), atau hook lain yang bergantung sama state atau lifecycle browser. Mereka juga gak bisa nanganin event listener (kayak onClick).
   • Cocok buat apa? Nampilin data yang diambil dari server, konten statis, bagian UI yang gak butuh banyak interaktivitas sisi klien.

2. Client Components (Komponen Klien) - Kalau Butuh Interaksi!

   • Kalau komponenmu butuh interaktivitas (misal, punya tombol yang bisa diklik, input field yang nilainya berubah, atau pake useState dan useEffect), kamu perlu nandain komponen itu sebagai Client Component.
   • Cara Nandain: Tambahin directive "use client"; di baris paling atas file komponen .tsx atau .jsx itu.
   • Apa artinya?
     • Kode JavaScript buat Client Component ini bakal dikirim dan dijalanin di browser klien.
     • Mereka BISA pake useState, useEffect, useContext, nanganin event (onClick, onChange), dan ngelakuin semua hal interaktif yang biasa kamu lakuin di React "polosan".
   • Cocok buat apa? Tombol interaktif, form input, komponen yang punya state lokal, komponen yang pake useEffect buat animasi atau langganan, pokoknya semua yang butuh "hidup" di browser.

Contoh Server Component (Default di app/page.tsx):

// src/app/contoh-server/page.tsx
 
// Gak ada "use client"; jadi ini Server Component
async function ambilDataPengguna() {
  // Simulasi fetch data
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { nama: "Budi dari Server", email: "budi.server@example.com" };
}
 
export default async function HalamanServer() {
  const pengguna = await ambilDataPengguna(); // Bisa langsung await!
 
  return (
    <div>
      <h1>Data dari Server Component</h1>
      <p>Nama: {pengguna.nama}</p>
      <p>Email: {pengguna.email}</p>
      {/* Gak bisa ada tombol dengan onClick di sini tanpa jadi Client Component */}
    </div>
  );
}

Contoh Client Component (Pake "use client";):

// src/app/components/TombolInteraktif.tsx
"use client"; // WAJIB di atas buat nandain ini Client Component
 
import React, { useState } from 'react';
 
export default function TombolInteraktif() {
  const [hitungan, setHitungan] = useState(0);
 
  return (
    <button 
      onClick={() => setHitungan(prev => prev + 1)}
      className="bg-purple-500 hover:bg-purple-700 text-white p-2 rounded"
    >
      Diklik {hitungan} kali
    </button>
  );
}
 
// Nanti di page.tsx (Server Component), kamu bisa impor dan pake TombolInteraktif ini:
// import TombolInteraktif from '@/app/components/TombolInteraktif';
// ...
// <TombolInteraktif /> 
// Next.js pinter, dia bakal nge-bundle TombolInteraktif ini buat klien, 
// tapi parent-nya (page.tsx) tetep bisa jadi Server Component.

Kapan Pake Server vs. Client Component?

• Prinsipnya: Sebisa mungkin, biarin komponenmu jadi Server Component (karena lebih bagus buat performa awal dan SEO).
• Baru jadiin Client Component ("use client";) kalau komponen itu bener-bener butuh fitur yang cuma ada di browser (interaktivitas, state, lifecycle hooks kayak useEffect).
• Kamu bisa ngerender Client Component di dalam Server Component. Ini pola yang umum.

Ini konsep yang mungkin agak baru kalau kamu dateng dari React biasa atau Pages Router. Tapi, ini adalah salah satu inovasi utama di App Router yang tujuannya ningkatin performa. Kita bakal banyak liat contohnya di studi kasus Toko Kue nanti.

Membangun UI di Next.js itu intinya adalah nyusun Pages (page.tsx) dari berbagai Komponen React reusable. Dengan App Router, kamu juga dapet "kekuatan super" dari Server Components buat ngambil data dan ngerender di server, sambil tetep bisa pake Client Components buat semua bagian yang butuh interaksi di browser.

Ini ngebuka cara baru buat mikirin arsitektur aplikasi React-mu. Jangan khawatir kalau Server/Client Component ini masih agak ngebingungin, nanti bakal makin jelas pas kita praktik!