Panduan & Referensi
Kasus penggunaan dunia nyata untuk membantu Anda memulai dengan Dasar Next.js untuk Aplikasi Web Modern.
Panduan
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.
Panduan
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.
Panduan
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`.
Panduan
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`.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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`.
Panduan
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.
Panduan
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.
Panduan