Menjadi Next.Js Developer

Sebelum masuk ke Next.js, ada beberapa hal dasar yang sebaiknya kamu pahami dulu supaya lebih gampang mengikuti konsep dan workflow-nya. 🚀

---

Hal-hal dasar yang perlu dipahami sebelum belajar Next.js:

1. Dasar-dasar JavaScript (ES6+)
   • Variabel (let, const, var)
   • Arrow function (()=>{})
   • Destructuring (const {name} = obj)
   • Spread/rest operator (...)
   • Modul (import / export)
   • Async/await & Promise
2. HTML & CSS
   • Struktur dasar HTML (tag, atribut, semantic HTML).
   • Styling dasar dengan CSS (selector, flexbox, grid).
   • Responsive design (media queries, units: %, rem, vw, vh).
   • Kalau sudah terbiasa dengan Tailwind CSS atau CSS-in-JS, itu akan lebih cepat di Next.js.
3. Dasar React.js
   Next.js dibangun di atas React, jadi kamu wajib paham React dasar:
   • Component (functional vs class, lebih sering functional).
   • Props (mengirim data antar komponen).
   • State (useState, useReducer).
   • Hooks dasar: useEffect, useContext.
   • Event Handling (onClick, onChange).
   • Conditional Rendering ({condition && <Component/>}).
   • List Rendering (.map()).
   • Controlled vs Uncontrolled input.
4. Routing di React
   • Pahami bagaimana routing biasanya dilakukan di React (misalnya react-router-dom), karena Next.js punya routing bawaan berbasis file system.
5. Konsep SSR & CSR
   • CSR (Client-Side Rendering): render di browser setelah bundle JS di-load.
   • SSR (Server-Side Rendering): render langsung di server, lebih cepat untuk SEO.
   • SSG (Static Site Generation): build sekali, serve hasil statis.
   • ISR (Incremental Static Regeneration): gabungan static + update periodik.
6. API dan Fetching Data
   • Cara fetch data dengan fetch, axios.
   • Pahami REST API / GraphQL dasar.
   • Di Next.js ada cara khusus (getServerSideProps, getStaticProps, getStaticPaths, dan app router pakai fetch langsung di server components).
7. Dasar Node.js & npm/yarn
   • Cara menjalankan project Node.js (npm run dev).
   • Menginstal package (npm install, yarn add).
   • Struktur folder project Node/React.
8. Version Control (Git/GitHub)
   • Biar gampang kolaborasi & deployment.
   • Dasar commit, push, pull.

---

⚡ Bonus (lebih lanjut setelah dasar kuat):

• Optimasi performa (lazy loading, dynamic import).
• Image optimization (Next.js <Image/>).
• Middleware (auth, logging).
• Deployment (Vercel, Netlify, dll).

---

Jadi stepnya biasanya:
JavaScript → React → Next.js.

🛣 Roadmap Belajar Next.js

1. Dasar JavaScript (ES6+)

📌 Fokus 1–2 minggu (kalau sudah bisa, lanjut cepat).

• Variabel: let, const
• Function & Arrow function
• Array & Object
• Loop (map, forEach)
• Destructuring
• Spread/rest operator
• Async/await & Promise
• Import & Export module

👉 Latihan: buat program kecil (todo list sederhana dengan JS murni).

---

2. HTML & CSS

📌 Fokus 1 minggu.

• Struktur HTML (semantic tag <header>, <main>, <footer>)
• Flexbox & CSS Grid
• Responsive Design
• Basic CSS animation & transition
• (Opsional) Tailwind CSS

👉 Latihan: bikin halaman landing page sederhana (profile page / portfolio).

---

3. React Dasar

📌 Fokus 2–3 minggu.

• Functional Component
• Props & State
• Event Handling (onClick, onChange)
• List rendering (map)
• Conditional rendering (if, ternary, &&)
• Hooks dasar:
  • useState
  • useEffect
• Form handling (controlled input)
• Component composition (nested component)

👉 Latihan: Todo List pakai React.

---

4. React Lanjutan

📌 Fokus 2 minggu.

• useContext (state global sederhana)
• useReducer
• Custom Hooks
• React Router (untuk belajar routing manual sebelum masuk Next.js)

👉 Latihan: buat aplikasi note sederhana dengan multi-page (pakai React Router).

---

5. Next.js Dasar

📌 Fokus 2–3 minggu.

• Struktur project Next.js
• File-based routing (pages / app)
• Dynamic routing
• Link & Navigation
• Static Asset (public folder)
• Styling: CSS Modules, Tailwind CSS (opsional)
• Pre-rendering:
  • CSR (Client-Side Rendering)
  • SSR (Server-Side Rendering)
  • SSG (Static Site Generation)

👉 Latihan: Buat blog sederhana (SSG + dynamic routes).

---

6. Next.js Lanjutan

📌 Fokus 2–4 minggu.

• Data fetching:
  • getStaticProps
  • getStaticPaths
  • getServerSideProps
• API Routes (membuat backend kecil dalam Next.js)
• Image Optimization (<Image />)
• Metadata & SEO (<Head /> / generateMetadata)
• Layout & Nested Layout (App Router)
• Middleware (auth, logging, dll.)
• Authentication (NextAuth.js)
• Deployment ke Vercel/Netlify

👉 Latihan: Buat aplikasi dashboard kecil (login, data fetch dari API, protected route).

---

7. Bonus: Fullstack Next.js

📌 Setelah sudah lumayan mahir.

• Integrasi database (Prisma, MongoDB, PostgreSQL).
• State management (Zustand, Redux Toolkit, TanStack Query).
• API GraphQL (Apollo/Urql).
• Optimasi performa (lazy loading, dynamic import).
• Testing (Jest, Playwright, Cypress).

👉 Latihan: Buat aplikasi e-commerce mini (login, list produk, cart, checkout).

---

⚡ Tips belajar:

• Jangan lompat langsung ke Next.js tanpa paham React dulu.
• Kerjakan proyek kecil di setiap tahap (practice > theory).
• Deploy hasil proyek ke GitHub & Vercel biar punya portfolio.