Tutorial Next.js: Membangun Aplikasi Web Modern dengan React Next.js adalah framework React yang populer untuk membangun aplikasi web performa tinggi dan kaya fitur. Ia menyediakan berbagai fitur bawaan yang mempermudah pengembangan, seperti server-side rendering (SSR), static site generation (SSG), routing berbasis file, dan optimasi gambar. Tutorial ini akan memberikan gambaran singkat tentang cara memulai dengan Next.js. **1. Persiapan Awal** Pastikan Node.js dan npm (atau yarn) sudah terpasang di sistem Anda. Buka terminal dan jalankan perintah berikut untuk membuat proyek Next.js baru: ```bash npx create-next-app nama-proyek # atau yarn create next-app nama-proyek ``` Ganti `nama-proyek` dengan nama yang Anda inginkan untuk proyek Anda. Ikuti petunjuk yang ditampilkan di terminal untuk menyelesaikan proses pembuatan proyek. **2. Struktur Proyek** Setelah proyek dibuat, Anda akan melihat struktur folder seperti berikut: * `pages/`: Folder ini adalah jantung dari routing Next.js. Setiap file JavaScript (atau TypeScript) di dalam folder ini akan otomatis menjadi sebuah rute. Contohnya, `pages/index.js` akan menjadi halaman utama (/). * `public/`: Folder untuk menyimpan aset statis seperti gambar, font, dan favicon. * `styles/`: Folder untuk menyimpan file CSS (atau SCSS). * `components/`: (Opsional) Folder untuk menyimpan komponen React yang dapat digunakan kembali. * `next.config.js`: File konfigurasi Next.js. **3. Menjalankan Aplikasi** Masuk ke direktori proyek Anda: ```bash cd nama-proyek ``` Kemudian, jalankan perintah berikut untuk memulai server pengembangan: ```bash npm run dev # atau yarn dev ``` Buka browser Anda dan kunjungi `http://localhost:3000`. Anda akan melihat halaman default Next.js. **4. Routing Berbasis File** Next.js menggunakan routing berbasis file, yang berarti rute aplikasi Anda ditentukan oleh struktur folder dan nama file di dalam folder `pages/`. Misalnya: * `pages/index.js` -> `/` * `pages/about.js` -> `/about` * `pages/blog/[id].js` -> `/blog/:id` (rute dinamis) Untuk membuat halaman baru, cukup buat file JavaScript (atau TypeScript) di dalam folder `pages/`. **5. Komponen React** Next.js dibangun di atas React, jadi Anda dapat menggunakan semua fitur dan sintaks React yang Anda kenal. Contoh sederhana komponen halaman: ```javascript // pages/about.js function AboutPage() { return ( ); } export default AboutPage; ``` **6. Server-Side Rendering (SSR) dan Static Site Generation (SSG)** Next.js menawarkan SSR dan SSG, yang meningkatkan performa dan SEO. * **SSR:** Halaman di-render di server pada setiap permintaan. Gunakan fungsi `getServerSideProps` untuk mengambil data di server. * **SSG:** Halaman di-render pada waktu build dan disimpan sebagai file HTML statis. Gunakan fungsi `getStaticProps` dan `getStaticPaths` (untuk rute dinamis) untuk mengambil data pada waktu build. **7. Mengambil Data** Untuk mengambil data, Anda dapat menggunakan fungsi `fetch` atau library lain seperti `axios` atau `swr`. Contoh penggunaan `getServerSideProps`: ```javascript // pages/blog/[id].js export async function getServerSideProps(context) { const { id } = context.params; const res = await fetch(`https://api.example.com/posts/${id}`); const post = await res.json(); return { props: { post, }, }; } function BlogPost({ post }) { return ( ); } export default BlogPost; ``` Ini hanyalah pengantar singkat tentang Next.js. Framework ini menawarkan banyak fitur lain seperti API Routes, Image Optimization, dan Internationalization. Dengan dokumentasi yang lengkap dan komunitas yang besar, Next.js adalah pilihan yang bagus untuk membangun aplikasi web modern. Teruslah belajar dan bereksperimen untuk menguasai Next.js!