Belajar Next.js - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Next.js! Series ini akan membawa kalian menguasai Next.js — framework React untuk aplikasi web server-rendered — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase: pre-requisites, basic operational, workloads, networking dan security, advanced topics, sampai modern ecosystem.

Tapi sebelum membuat project pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Next.js bukan sekadar pustaka; dia adalah framework yang mengatur routing, rendering, bundling, dan deployment. Kalau kalian belum nyaman dengan React, JSX, atau konsep rendering di browser, sebagian besar materi akan terasa abstrak.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js, editor, dan tooling, lalu memverifikasi environment dengan skrip pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern (ES6+)

Next.js menghasilkan HTML dan CSS yang di-render di server maupun browser, jadi kalian wajib paham struktur halaman, semantik tag, selektor CSS, dan layout. Untuk JavaScript, kuasai fitur ES6+ seperti arrow function, destructuring, template literal, spread operator, module import dan export, serta Promise dan async await. Fitur-fitur ini muncul terus-menerus di seluruh kode Next.js.

#React dan Komponen Fungsional

Next.js adalah framework di atas React. Kalian harus memahami komponen fungsional, props, JSX, conditional rendering, list rendering dengan key, dan hooks dasar seperti useState dan useEffect. Seluruh UI di Next.js dibangun sebagai komponen React — server component maupun client component — jadi fondasi ini adalah syarat mutlak.

#SPA dan Client-Side Rendering

Pahami dulu konsep Single Page Application: satu HTML yang diisi ulang oleh JavaScript di browser. Dari sana kalian akan mengerti kenapa SPA murni punya masalah SEO dan waktu muat awal, dan bagaimana Next.js menjawabnya dengan rendering di server. Konsep ini menjadi kunci untuk episode 1 dan 2.

#Command Line, Git, dan Package Manager

Semua workflow Next.js berjalan dari terminal. Kalian harus nyaman berpindah folder, menjalankan perintah, dan membaca output. Kuasai juga Git untuk version control — init, add, commit, push, branch — dan satu package manager: npm, yarn, atau pnpm. Series ini memakai npm, yang ikut terinstall bersama Node.js.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS

Wajib memakai Node.js versi LTS terbaru (saat penulisan series ini, Node.js 20 LTS atau yang lebih baru). Node.js menyediakan runtime untuk menjalankan Next.js di development maupun build. Verifikasi versi Node dan npm:

node --version
npm --version

Pastikan node --version menampilkan versi 20 ke atas. Jika versi kalian lebih lama, sebaiknya upgrade dulu sebelum melanjutkan.

#IDE/Editor: VS Code dengan Ekstensi

Gunakan VS Code dan pasang ekstensi penunjang: ESLint untuk linting inline, Prettier untuk format otomatis, dan Tailwind CSS IntelliSense jika memakai Tailwind (episode 5). Jika ingin, pasang juga ekstensi Reactjs code snippets untuk mempercepat penulisan komponen.

#Browser dan Tooling Modern

Pakai browser modern seperti Chrome, Edge, atau Firefox untuk development. Siapkan juga ESLint, Prettier, dan TypeScript — ketiganya akan dikonfigurasi otomatis oleh create-next-app di episode 3. Untuk perangkat keras, laptop dengan minimal 8GB RAM direkomendasikan agar build dan development server berjalan lancar.

#Setup Node.js dengan nvm

#Menginstall Node.js LTS

Cara paling rapi mengelola versi Node adalah memakai nvm (Node Version Manager). Install nvm, lalu gunakan untuk memasang Node versi LTS:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install --lts
nvm use --lts
node --version

Perintah nvm install --lts memasang versi LTS terbaru secara otomatis. Dengan nvm, kalian bisa berpindah versi Node antar project tanpa konflik — kebiasaan penting untuk kerja tim dan production.

#Memverifikasi npm dan Git

Pastikan npm dan Git siap, lalu atur identitas Git untuk commit pertama nanti:

npm --version
git --version
git config --global user.name "Arman Dwi Pangestu"
git config --global user.email "arman@example.com"

Output npm --version dan git --version harus menampilkan nomor versi, bukan error command not found. Jika Git belum terinstall, pasang dulu dari package manager sistem operasi kalian.

#Verifikasi Environment

#Uji Cepat dengan Skrip Node

Untuk memastikan environment berfungsi, buat file bernama cek.js dan jalankan:

Verifikasi pertama dengan Node

const nama = "developer"
const sapa = (n) => `Halo, ${n}! Selamat belajar Next.js`
 
console.log(sapa(nama))

Jalankan dengan node cek.js. Jika muncul pesan sapa tanpa error, environment JavaScript kalian sudah siap dipakai untuk episode berikutnya.

#Checklist Prasyarat

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• HTML, CSS, dan JavaScript ES6+ dengan nyaman.
• Dasar React: komponen fungsional, props, JSX, dan hooks.
• Konsep SPA dan client-side rendering.
• Node.js LTS dan npm terinstall dan terverifikasi.
• Git terkonfigurasi dengan identitas pengguna.
• VS Code dengan ekstensi ESLint dan Prettier.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 23 episode berikutnya terasa jauh lebih ringan.

#Penutup

Inti yang harus dibawa pulang:

• Next.js butuh dasar React dan JavaScript ES6+ yang solid.
• Pahami konsep SPA untuk mengerti masalah yang dipecahkan Next.js.
• Node.js LTS wajib terinstall dan terverifikasi.
• npm, Git, dan VS Code adalah toolkit harian kalian.
• Selalu jalankan verifikasi sederhana sebelum mulai coding.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Next.js — dari evolusi framework ini, kontribusi Vercel, sampai masalah yang diselesaikannya untuk performa, SEO, dan developer experience. Pastikan environment kalian sudah siap, karena perjalanan Belajar Next.js baru saja dimulai!