5 Jam Belajar Next.js Yang Penting-Penting Aja

https://nextjs.org https://dev.nauv.al Trakteer: https://trakteer.id/mhdnauvalazhar Instagram:   / mhdnauvalazhar   Twitter:   / mhdnauvalazhar   GitHub: https://github.com/nauvalazhar Website: https://nauv.al Timestamp: 00:00:00 Intro: Pengantar materi Next.js Essential. 00:00:51 Pembahasan Materi: Penjelasan konsep dan fitur Next.js yang biasa digunakan. 00:02:09 Alasan Menggunakan Next.js: Diskusi subjektif tentang kelebihan Next.js. 00:04:11 Pembahasan Fitur-fitur Next.js 00:06:36 Pembahasan Fitur App Router, React Server Component 00:08:24 Pembahasan Fitur Server Action 00:11:15 Pembahasan Fitur Streaming 00:15:48 Metode Belajar: Menggunakan dokumentasi resmi Next.js. 00:18:59 Memulai Project Baru: Membuat project Next.js baru. 00:25:51 Penjelasan Project: Membahas struktur folder dan file project Next.js. 00:41:43 React Server Components: Konsep dasar dan implementasinya di Next.js. 00:56:55 Client Components: Perbedaan dengan server components dan cara penggunaannya. 01:05:05 Routing Dasar: Membuat route (halaman) baru di Next.js. 01:07:57 Nested Routes: Membuat route bersarang. 01:09:13 Praktik Terbaik Interleaving 01:14:55 Layouts: Menggunakan layout untuk berbagi UI antar halaman. 01:22:16 Nested Layout: Membuat layout bersarang untuk kasus yang lebih kompleks. 01:31:19 Navigasi Antar Halaman: Menggunakan komponen `Link`. 01:36:45 Dynamic Routes: Membuat route dinamis dengan parameter URL. 01:46:48 Route Groups: Mengelompokkan route tanpa mempengaruhi URL. 01:53:05 Pembahasan Colocation 02:06:54 Perbedaan Layout & Import Komponen 02:07:48 Styling di Next.js: Opsi styling (CSS Modules, Tailwind, dll.). 02:15:55 Tailwind CSS 02:19:37 Font: Menggunakan Google Fonts dengan Next.js. 02:28:54 Komponen Image: Mengoptimalkan gambar dengan komponen `Image`. 02:56:52 Placeholder Gambar 02:57:25 Data Fetching: Mengambil data di server components. 03:10:48 Halaman Detail Dinamis 03:16:58 Data Fetching Level Komponen 03:20:52 Memahami Extended Fetch API 03:38:48 Server Actions & Mutations: Membuat dan menggunakan server actions. 03:51:01 Form Validation 03:57:53 Penggunaan di Button 04:05:21 Passing Argumen 04:08:05 Metadata: Mengatur metadata (title, description, dll.) untuk SEO. 04:16:58 Favicon 04:18:52 Loading UI & Streaming: Membuat loading state dan implementasi streaming. 04:30:07 Route Handlers: Membuat API endpoint di Next.js. 04:42:55 Middleware 04:54:36 Error Handling: Menangani error dengan `error.tsx` dan `not-found.tsx`. 05:06:50 Production Build: Membangun aplikasi Next.js untuk production. 05:25:19 Penutup