Nextjs Berkenalan dengan Nextjs
Apa itu nextjs?, Fitur apa saja yang ada di Nextjs?, Apa itu App Router dan Pages Router di Nextjs? Dokumentasi Nextjs bahasa Indonesia. Bergabung dengan komunitas Nextjs di seluruh dunia.
Series: Nextjs
- Nextjs Berkenalan dengan Nextjs
- Nextjs cara menginstall nextjs
- Mengenal struktur project Nextjs
Halo semuanya, ini adalah seri pertama tentang Nextjs. Disinilah saya menaruh catatan saya tentang apa yang saya pelajari di Nextjs. ntah seri ini akan sampe tamat atau hanya sampai sini saja, mengingat tentang pribadi saya yang kurang konsisten dalam menjalankan sesutu :D. Saya pun tidak yakin akan ada orang yang mampir kesini. gpp lah, intinya semoga bermanfaat 🫠
Apa itu Nextjs?
Menurut halaman dokumentasi resminya, Nextjs adalah framework React untuk membangun full-stack web Aplication. Kamu menggunakan Components React untuk membangun user interface, dan Next.js ini digunakan untuk menambahkan fitur tambahan dan meng-optimalkan apa-apa saja yang gak disediain secara default ketika kita cuman pake Components React.
Nextjs ini membantu kamu buat bikin aplikasi web dengan React tanpa harus ribet setting ini-itu. Misalnya kaya penggabungan code, kompilasi dll itu udah otomatis diatur sama Nextjs. Jadi kamu bisa fokus bikin aplikasi web, gak perlu buang-buang waktu buat ngatur ini-itu secara manual. 😲
Dikutip dari website resminya :
Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.
Artinya, Nextjs ini cocok untuk semua jenis Developer. mau kamu kerja sendiri atau bareng Tim, Nextjs bisa ngebantu bikin aplikasi React yang responsif, dinamis (Bergerak aktif) dan cepat ketika di akses user. 🤗
Fitur utama Nextjs
| Fitur | Deskripsi |
|---|---|
| Routing | Router berbasis sistem file yang mendukung layout, routing bertingkat, loading states, penanganan error, dan lainnya. |
| Rendering | Mendukung Client-side dan Server-side Rendering dengan Client dan Server Components. Dioptimalkan dengan Static dan Dynamic Rendering. |
| Data Fetching | Pengambilan data disederhanakan dengan async/await dalam Server Components. Extended fetch API untuk memoisasi permintaan, caching data, dan validasi ulang. |
| Styling | Mendukung metode styling seperti CSS Modules, Tailwind CSS, dan CSS-in-JS. |
| Optimisasi | Optimisasi gambar, font, dan script untuk meningkatkan Core Web Vitals dan Pengalaman Pengguna. |
| TypeScript | Dukungan yang diperbaiki untuk TypeScript, dengan pemeriksaan tipe yang lebih baik dan kompilasi yang lebih efisien. |
App Router vs Pages Router
Next.js Punya dua router yang berbeda: App Router dan Pages Router. App Router adalah router yang lebih baru, kamu bisa pake fitur terbaru React, seperti Server Components dan Streaming. Pages Router adalah router asli Next.js, kamu bisa membangun aplikasi React yang dirender oleh server dan akan terus support untuk aplikasi Next.js yang lebih lama. Dengan kata lain, App Router ini lebih cocok untuk pengembangan aplikasi yang lebih modern dengan fitur-fitur terkini, sementara Pages Router cocok untuk aplikasi Next.js yang lebih lawas (tua) dan menggunakan pendekatan pengembangan yang lebih tradisional.
Pre-Requisite Knowledge
Dikutip dari dokumentasi resminya :
To get the most out of our docs, it's recommended that you have a basic understanding of HTML, CSS, and React.
Artinya, kamu disaranin buat paham dulu tentang basic pemrograman web,seperti HTML, CSS dan react sebelum kamu belajar nextjs ini. Walaupun dokumentasinya bilang kalo ini didisain untuk pemula, tapi kalo kamu paham basic pemrograman web, ini bakal lebih membantu kamu dalam memahami dokumentasinya. Dokumentasinya ngasih referensi kalo kamu pengen ningkatin basic React, bisa di link ini 👉 React Foundations Course . disana kamu bakal diajarin dasar-dasarnya. kalo kamu pengen belajar lebih tentang Nextjs bisa dengan 👉 Membangun sebuah aplikasi dashboard
Sedikit tambahan, kamu bisa belajar HTML, CSS, Javascript, React di list berikut. Tidak bermaksud promo ☠️, hanya saja menurut saya tutorial ini lebih mudah dicerna.
Mungkin beberapa dari kamu sudah tidak asing dengan orang yang buat tutorial ini, ya beliau adalah lord kita semua. Bapak R SANDHIKA GALIH AMALGA, S.T., M.T. 🎉
Sekilas tentang Riwayat Pendidikan beliau :
| No. | Perguruan Tinggi | Gelar Akademik | Tanggal Ijazah | Jenjang |
|---|---|---|---|---|
| 1 | Universitas Pasundan | S.T | 2008 | S1 |
| 2 | Institut Teknologi Bandung | M.T | 2011 | S2 |
Tentunya diluar sana masih banyak tutorial yang loginawi dan masuk diakal, seperti chanel youtubenya aa Dea Afrizal lalu adapula yang versi artikelnya di PetaniKode dan banyak lagi. klean cek aja di gugel.
Gabung dengan Komunitas Nextjs
Kalo kamu punya pertanyaan seputar Nextjs kamu bisa gabung komunitasnya di sini :
Daripada disebut sebuah tutorial, Artikel ini lebih ke seperti dokumentasi Nextjs yang telah di terjemahkan ke bahasa Indonesia dengan menggunakan bahasa sendiri hehe 😅 Semoga bermanfaat, Sekian dan terimakasih 🎉