Next.js adalah framework React yang sangat populer dan digunakan oleh perusahaan besar seperti TikTok, Netflix, Github, dan Spotify. Dengan Next.js, developer bisa membuat website yang super cepat, SEO-friendly, dan gampang dikembangkan.

Jika kamu sudah mengenal React, maka Next.js akan terasa sangat menyenangkan dan membantu kerja jadi lebih cepat.

Di artikel ini kamu akan belajar Next.js dari nol:

Apa itu Next.js
Mengapa harus memakai Next.js
Cara instalasi
Struktur folder
Routing
Komponen & halaman
Styling (CSS, Tailwind)
Fetch data (server & client)
API Routes
Deploy

Penjelasannya dibuat super mudah untuk pemula. Mari mulai!

Apa Itu Next.js?

Next.js adalah framework berbasis React yang menambahkan fitur penting seperti:

Routing otomatis
Server-side rendering (SSR)
Static site generation (SSG)
API routes (backend kecil di dalam Next.js)
Optimasi gambar otomatis
SEO lebih bagus
Performa tinggi

Tidak seperti React biasa yang fokus pada “komponen”, Next.js fokus pada pembangunan aplikasi web lengkap dengan struktur lebih rapi.

Kenapa Harus Pakai Next.js?

Berikut alasan kenapa Next.js populer di dunia frontend:

✅ Routing otomatis, tidak perlu react-router

Buat file → langsung jadi halaman.

✅ SEO-friendly

Google bisa membaca website dengan lebih mudah karena SSR/SSG.

✅ Performa cepat

Next.js mengoptimalkan asset, gambar, caching, dan bundling.

✅ Ada backend kecil

Dengan API routes, kamu bisa membuat endpoint seperti:
/api/login atau /api/products.

✅ Cocok untuk project modern

Seperti dashboard, landing page, ecommerce, hingga SaaS.

Cara Install Next.js (Terbaru 2025)

Pastikan sudah menginstall Node.js.

Lalu jalankan:

npx create-next-app@latest

Next.js akan menanyakan:

✔ TypeScript? … Yes / No
✔ Tailwind CSS? … Yes / No
✔ App Router? … Yes / No (disarankan Yes)
✔ ESLint? ... Yes
✔ Import alias? ... Yes

Setelah selesai:

cd nama-project
npm run dev

Lalu buka:
http://localhost:3000

Next.js kamu siap digunakan!

Struktur Folder Next.js (App Router)

Jika kamu menggunakan App Router (direkomendasikan):

app/
  page.jsx
  layout.jsx
  about/
    page.jsx
public/
styles/

Penjelasan singkat:

page.jsx → halaman utama
layout.jsx → layout global, seperti header/footer
folder/about/page.jsx → otomatis menjadi /about
public → tempat gambar & asset statis
styles → CSS global

Routing di Next.js

Next.js memakai file-system routing, yaitu:

1 folder = 1 route

1 file page.jsx = 1 halaman

Contoh:

app/page.jsx → "/"
app/about/page.jsx → "/about"
app/blog/page.jsx → "/blog"

Tidak perlu react-router!

Membuat Halaman di Next.js

/app/page.jsx

export default function Home() {
  return (
    <h1>Selamat datang di Next.js!</h1>
  );
}

/app/about/page.jsx

export default function About() {
  return (
    <div>
      <h1>Tentang Kami</h1>
      <p>Ini adalah halaman About.</p>
    </div>
  );
}

Halaman langsung bisa diakses.

Layout di Next.js

Gunakan layout.jsx untuk header, footer, dan styling global.

/app/layout.jsx

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        <header>
          <h2>Header Next.js</h2>
        </header>

        {children}

        <footer>
          <p>© 2025 Next.js App</p>
        </footer>
      </body>
    </html>
  );
}

Styling di Next.js

Ada beberapa cara styling:

1. CSS Biasa

Buat file:

styles/global.css

Lalu import di layout.jsx:

import '../styles/global.css'

2. CSS Module

import styles from './home.module.css'

<p className={styles.title}>Halo</p>

3. Tailwind CSS (paling populer)

Pada instalasi create-next-app pilih “Yes” untuk Tailwind.

Lalu gunakan:

<h1 class="text-3xl font-bold">Hello Tailwind</h1>

Tailwind + Next.js adalah kombinasi paling modern.

Fetch Data di Next.js

Next.js punya dua metode:

1. Server Component (default)

Diproses di server.

Contoh fetch API:

export default async function Page() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());

  return (
    <div>
      <h1>Daftar Post</h1>
      {data.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

2. Client Component

Jika butuh interaksi: klik, input, state.

Tambahkan:

'use client'

Contoh:

'use client'
import { useState } from "react";

export default function Counter() {
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <h1>{angka}</h1>
      <button onClick={() => setAngka(angka + 1)}>Tambah</button>
    </div>
  );
}

API Routes (Backend di Next.js)

Next.js menyediakan backend kecil di folder:

/app/api

Contoh API sederhana:

/app/api/halo/route.js

export async function GET() {
  return Response.json({ pesan: "Halo dari API Next.js!" });
}

Akses via browser:

http://localhost:3000/api/halo

Dynamic Routing (URL Dinamis)

Untuk halaman seperti:

/blog/1
/blog/2

Buat folder dengan tanda kurung:

app/blog/[id]/page.jsx

Isi:

export default function BlogDetail({ params }) {
  return <h1>Blog ID: {params.id}</h1>;
}

Menggunakan Image Component

Next.js punya komponen gambar otomatis optimal:

import Image from 'next/image'

<Image src="/hero.png" width={400} height={300} alt="Hero" />

Gambar jadi lebih cepat & tidak pecah.

Deploy Next.js ke Internet

Cara paling mudah:

Deploy ke Vercel (Direkomendasikan)

Next.js dibuat oleh Vercel, jadi:

Gratis
Sangat cepat
Mudah

Langkah:

push project ke GitHub
buka https://vercel.com
pilih “Import Project”
pilih repo GitHub
done, website langsung online

Sumber Belajar Next.js Terbaik

📘 Dokumentasi Resmi
https://nextjs.org/docs

📘 Next.js Learn (Tutorial Resmi Interaktif)
https://nextjs.org/learn

📘 YouTube – Web Programming UNPAS
Cari: “Belajar Next JS Dasar”

📘 YouTube – Traversy Media
Tutorial Next.js terbaik untuk pemula Inggris

📘 UI untuk Next.js – shadcn/ui
https://ui.shadcn.com

Kesimpulan

Next.js adalah framework React terbaik untuk membuat website modern. Dengan fitur seperti halaman otomatis, server-side rendering, optimasi bawaan, API routes, dan performa tinggi, Next.js menjadi pilihan utama developer di 2025.

Jika kamu ingin membangun:

Website cepat
Portfolio
Blog SEO-friendly
Dashboard
Ecommerce
Aplikasi SaaS

Maka Next.js adalah framework terbaik untuk memulai.

BELAJAR NEXT JS