Dasar Next.js untuk Aplikasi Web Modern

Apa Itu Next.js?

Kenalan dengan Next.js, framework React yang super populer! Pahami mengapa Next.js disebut 'The React Framework', fitur utamanya (Server Components, App Router, SSR, SSG, API Routes), dan keunggulannya untuk membangun web modern.

Setup Proyek Next.js

Mulai petualangan Next.js-mu! Panduan langkah demi langkah membuat proyek Next.js baru (versi 15+) menggunakan `create-next-app`, termasuk pilihan TypeScript, Tailwind CSS, dan App Router.

Routing Dasar Next.js (App Router)

Pelajari bagaimana Next.js App Router secara ajaib membuat rute URL berdasarkan struktur folder dan file di direktori `app/` Anda. Pahami konvensi file spesial seperti `page.tsx` dan `layout.tsx`.

Navigasi & Link di Next.js

Pelajari cara membuat navigasi yang cepat dan mulus di aplikasi Next.js Anda menggunakan komponen `<Link>` untuk client-side routing, dan cara melakukan navigasi secara programatik menggunakan hook `useRouter` dari `next/navigation`.

Pages & Komponen di Next.js

Pahami bagaimana file `page.tsx` menjadi UI utama untuk setiap rute di Next.js App Router, cara menggunakan komponen React reusable di dalamnya, dan pengenalan dasar Server Components vs. Client Components.

Toko Kue: Perencanaan & Data

Mulai bangun Toko Kue Online dengan Next.js & TypeScript! Tahap pertama: merencanakan fitur-fitur dasar aplikasi dan membuat struktur data dummy untuk produk kue kita dalam format JSON.

Toko Kue: API Produk (Route Handlers)

Bangun backend sederhana untuk Toko Kue-mu! Pelajari cara membuat API Routes (Route Handlers) di Next.js App Router untuk mengambil semua produk dan detail produk dari data dummy JSON.

Studi Kasus Toko Kue Halaman Daftar Produk

Toko Kue: Halaman Detail Produk

Bikin halaman spesifik untuk tiap kue! Pelajari cara membuat dynamic route di Next.js App Router (misal, `/kue/[id]`), mengambil parameter ID, dan fetch data detail produk dari API.

Toko Kue: Keranjang Belanja (State, Context, localStorage)

Bikin fitur keranjang belanja untuk Toko Kue-mu! Pelajari cara mengelola state keranjang, menambah/menghapus item, dan menyimpan data keranjang di localStorage agar tidak hilang. Mungkin juga pengenalan Context API untuk state global.

Toko Kue: Checkout & Halaman Terima Kasih

Tahap akhir Toko Kue! Pelajari cara membuat form checkout sederhana dengan controlled components di React/Next.js, menangani submit, dan melakukan navigasi programatik ke halaman terima kasih.

Styling di Next.js

Bikin aplikasi Next.js-mu tampil memukau! Pelajari berbagai pendekatan untuk styling, mulai dari CSS global, CSS Modules untuk scope lokal, hingga integrasi dengan utility-first framework seperti Tailwind CSS.

Aset Statis & Gambar (next/image)

Pelajari cara menyajikan file statis (seperti favicon atau gambar umum) menggunakan folder `public` di Next.js, dan cara mengoptimalkan gambar secara otomatis untuk performa web yang lebih baik menggunakan komponen `<Image>` dari `next/image`.

Deploy Next.js ke Vercel

Saatnya pamerkan karyamu! Pelajari langkah-langkah mudah untuk mendeploy aplikasi Next.js Anda ke Vercel, platform hosting yang dioptimalkan untuk Next.js, langsung dari repositori GitHub Anda.

Penutup Next.js & Lanjutan

Kamu berhasil! Rangkuman perjalanan belajar Next.js dari dasar, menekankan kekuatannya sebagai framework React, dan memberikan motivasi serta arahan ke topik Next.js dan ekosistem React yang lebih lanjut.