Dua hari ini gua belajar NEXT JS, masih keluarga Javascript sih, tepatnya framework react untuk full-stack web applications. gua kutip dari website resminya ini dia “Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
It also automatically configures lower-level tools like bundlers and compilers. You can instead focus on building your product and shipping quickly.
Whether you’re an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.”
Belajar kali ini gua ikutin video youtube dari salah satu channel luar negeri namanya “Javascript Mastery”. kenapa gua dari situ? karena pertama, secara teori dijelasin, kedua sambil praktik dengan real project sampai ke deployment. meskipun sedikit sedih karena pake bahasa inggris wkwk
Tapi anyway untuk next js ini gua pelajari beberapa hal yang ada di NEXT js:
- Installation, di sini dijelasin gimana caranya untuk install next js di laptop kita sendiri. bisa kunjungin di website resminya nextjs.org
- Struktur Project, analoginya kaya Dapur Utama. Semua bahan, resep, dan alat masak (kode, komponen, logic) disimpan di sini. Struktur folder di dalam
app/mencerminkan menu dan tata letak ruangan. Setiap folder adalah segmen URL, dan filepage.jsadalah “hidangan” yang disajikan di URL tersebut. - App Router kaya Manajer Restoran & Sistem Pemesanan, Ini adalah sistem baru yang mengelola alur kerja, dari pesanan masuk hingga hidangan disajikan. Intinya, App Router mengatur routing (jalur hidangan) dan cara rendering (cara memasak) yang lebih efisien menggunakan komponen server dan klien.
- React Client & Server Components, client components kaya Garnish & Topping (Dibuat di Meja Pelanggan): Bagian hidangan yang interaktif (perlu diklik, digeser, atau berubah tanpa refresh penuh). Komponen ini perlu diolah di sisi pelanggan (browser). Ditandai dengan
**'use client'**di awal file. Contoh: Tombol “Like”, Dropdown interaktif. sedangkan server component kaya Inti Hidangan (Dibuat di Dapur/Server) : Bagian hidangan yang statis (tidak interaktif) atau yang membutuhkan akses data rahasia. Komponen ini “dimasak” sepenuhnya di server sebelum dikirim ke pelanggan. Ini adalah default di App Router dan membuat pemuatan awal sangat cepat. Contoh: Daftar menu, detail produk, tampilan statis. - Routing, kaya Jalur Menu dan Tata Letak Ruangan, Folder di dalam
app/menentukan URL Anda (misalnya,app/menu/page.jsmenjadi/menu). Ini seperti jalur yang dilalui pelanggan untuk mencapai stasiun hidangan tertentu. Filelayout.jsadalah “dekorasi ruangan” (seperti header dan footer) yang dibagikan ke semua hidangan di dalam folder tersebut. - Data Fetching, kaya Mengambil Bahan dari Gudang Dapur, Di App Router, pengambilan data (fetch) secara default terjadi di Server Components (di Dapur). Ini seperti koki mengambil bahan dari gudang sebelum memasak, jadi hidangan (halaman) sudah lengkap saat disajikan ke pelanggan. Ini jauh lebih cepat daripada pelanggan menunggu di meja.
- API Routes, layaknya Layanan Pesan Antar (Delivery Service), Ini adalah kode khusus di server untuk menangani permintaan backend secara langsung (misalnya, menyimpan data formulir, login pengguna). Mereka bukan untuk membuat tampilan. Ini seperti nomor telepon atau sistem online yang hanya melayani pesanan delivery (data mentah), bukan untuk makan di tempat (tampilan UI).