FARISITE

Hari 2 – Navigasi, Layout, & Dynamic Routing Setelah berhasil melakukan instalasi dan membuat halaman pertama di Hari 1 , pada Hari 2 ini kita akan membuat website menjadi lebih hidup. Kita akan belajar cara membuat menu navigasi agar bisa pindah-pindah halaman, membuat tampilan menu yang konsisten (Layout), dan membuat halaman artikel yang pintar (Dynamic Routing). Tutorial ini tetap menggunakan Windows + VS Code dan melanjutan project nextjs-basic dari hari sebelumnya. 1. Navigasi Antar Halaman ( <Link> ) Di HTML biasa, kita menggunakan tag <a> untuk berpindah halaman. Namun, di Next.js kita menggunakan komponen khusus bernama <Link> . Kenapa harus pakai <Link> ? Jika pakai <a> , layar akan berkedip (loading ulang) setiap pindah halaman. Dengan <Link> , perpindahan halaman terjadi instan tanpa refresh. 1.1 Edit Halaman Home Kita akan menambahkan tombol untuk pergi ke halaman About. Buka file src/app/page.tsx , lalu ganti isinya dengan kod...

  Hari 1 – Instalasi & Pengenalan Dasar Next.js (App Router) Pada hari pertama ini, kita akan memulai dari nol , mulai dari persiapan environment , instalasi Next.js, hingga memahami konsep dasar routing dan membuat halaman pertama. Tutorial ini menggunakan Windows + VS Code dan cocok untuk pemula. 1. Persiapan Environment Sebelum menginstal Next.js, pastikan beberapa tools berikut sudah tersedia di komputer. 1.1 Install Node.js Next.js membutuhkan Node.js untuk berjalan. Unduh Node.js versi LTS (Long Term Support) Instal seperti aplikasi biasa Setelah selesai, restart komputer (penting agar PATH terbaca) 1.2 Cek Instalasi Node.js dan npm Buka Terminal / PowerShell , lalu jalankan: node -v npm -v Jika muncul versi (contoh: v20.x.x ), berarti Node.js berhasil terpasang. 2. Membuat Project Next.js 2.1 Masuk ke Folder Kerja Masuk ke folder tempat kamu biasa menyimpan project web, misalnya: cd %USERPROFILE%\Documents\web Sesuaikan dengan folder masi...

Introduction Many React developers are surprised when their app works perfectly during development — but behaves differently after deployment. Features break, routing fails, environment variables disappear, or performance changes dramatically. Most of these issues come from not understanding the difference between React’s development mode and production (build) mode . In this article, we’ll explain: What development mode really does What changes in production builds Why bugs appear only after deployment How to avoid common build-related mistakes What Is Development Mode in React? Development mode is what you use when running commands like: npm start npm run dev In this mode, React prioritizes developer experience , not performance. Key Characteristics of Development Mode Detailed error messages Helpful warnings Hot reloading (instant updates) Slower performance (on purpose) Extra checks for unsafe patterns Development mode helps you find bugs e...

  Introduction React routing often works perfectly during development — but suddenly breaks in production . Pages show a blank screen, return 404 errors, or fail when users refresh the browser. If you’ve ever asked: “Why does my React routing work locally but not after deployment?” This article will give you a clear, practical explanation . We’ll cover: How React routing actually works Why it breaks in production The most common mistakes How to fix routing issues correctly How React Routing Works React applications use client-side routing , most commonly with React Router . Instead of the server handling routes like: /about /contact /products React: Loads one HTML file ( index.html ) Uses JavaScript to switch views Updates the URL without reloading the page This is fast and smooth — but it creates problems if the server is not configured properly. Why Routing Works in Development During development: You usually run npm run dev or npm s...

Introduction One of the most frustrating problems when working with React JS is opening your app and seeing… nothing . No error message. No UI. Just a blank page . This issue happens frequently, especially after deployment or routing changes. In this article, we’ll explain why React apps show a blank page , the most common causes , and how to fix them step by step . What a “Blank Page” Usually Means in React A blank page usually means: React failed to render the UI JavaScript error stopped execution Routing or build configuration is broken Most of the time, the issue is not React itself , but how the app is configured. 1. JavaScript Error in the Console The first thing you should always check is the browser console. How to Check Open the app Right click → Inspect Open the Console tab If you see a red error message, React stopped rendering. Common Examples Cannot read property of undefined Unexpected token Module not found Fix Read the...