Cara Membuat Website dengan Next.js: Panduan Lengkap untuk Pemula 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan Next.js?

Cara membuat website dengan Next.js adalah salah satu keterampilan paling dicari di industri web development saat ini. Next.js - framework berbasis React yang dikembangkan oleh Vercel - telah menjadi standar de facto untuk membangun website dan aplikasi web modern yang membutuhkan performa tinggi, SEO optimal, dan pengalaman developer yang luar biasa.

Berbeda dari React biasa yang menghasilkan Single Page Application (SPA) dengan keterbatasan SEO, Next.js hadir dengan fitur Server-Side Rendering (SSR), Static Site Generation (SSG), dan Incremental Static Regeneration (ISR) yang membuat website Anda bisa diindeks dengan sempurna oleh Google. Inilah mengapa hampir semua website bisnis, e-commerce, dan blog profesional yang dibangun dengan React kini menggunakan Next.js.

Dalam panduan lengkap ini, Anda akan belajar cara membuat website dengan Next.js dari nol: mulai dari instalasi environment, memahami App Router dan Server Components, fetching data, styling dengan Tailwind CSS, optimasi SEO, hingga men-deploy website ke hosting. Mari kita mulai!

Prasyarat Sebelum Belajar Next.js

Next.js dibangun di atas React, jadi sebelum masuk ke Next.js pastikan Anda sudah memahami:

• HTML dan CSS dasar - struktur halaman, flexbox, dan responsiveness
• JavaScript ES6+ - arrow function, destructuring, async/await, module import/export
• Dasar-dasar React - komponen, props, state dengan useState, dan hook dasar

Jika Anda belum familiar dengan React, luangkan 3-4 minggu untuk mempelajari konsep dasar React terlebih dahulu. Next.js akan terasa jauh lebih mudah dengan fondasi React yang kuat. Bagi yang sudah paham React, Anda akan merasakan bagaimana Next.js memperluas kemampuan React dengan fitur-fitur yang sangat powerful untuk production.

Langkah 1: Menyiapkan Environment Development

Install Node.js

Next.js memerlukan Node.js versi 18.17 atau lebih baru. Kunjungi nodejs.org dan unduh versi LTS terbaru. Verifikasi instalasi di terminal:

node --version   # v22.x.x atau lebih baru
npm --version    # 10.x.x

Setup VS Code

Gunakan Visual Studio Code dengan ekstensi berikut untuk pengalaman development Next.js yang optimal:

• ES7+ React/Redux/React-Native snippets - shortcut komponen React
• Tailwind CSS IntelliSense - autocomplete class Tailwind
• Prettier - Code formatter - format kode otomatis
• ESLint - deteksi error dan konsistensi kode
• Auto Rename Tag - ubah tag pembuka dan penutup bersamaan

Langkah 2: Membuat Proyek Next.js Baru

Cara paling mudah membuat proyek Next.js baru adalah menggunakan perintah resmi create-next-app:

npx create-next-app@latest nama-website-anda

Perintah ini akan menampilkan wizard interaktif. Pilihan yang direkomendasikan untuk tahun 2026:

Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like your code inside a 'src/' directory? → Yes
Would you like to use App Router? → Yes
Would you like to use Turbopack for next dev? → Yes
Would you like to customize the import alias? → No

Setelah instalasi selesai, masuk ke direktori proyek dan jalankan server development:

cd nama-website-anda
npm run dev

Buka http://localhost:3000 di browser - Anda akan melihat halaman welcome Next.js. Server development akan otomatis me-reload setiap kali Anda menyimpan perubahan.

Memahami Struktur Folder Next.js dengan App Router

nama-website-anda/
├── public/              ← aset statis (favicon, gambar publik)
├── src/
│   ├── app/             ← App Router - semua halaman ada di sini
│   │   ├── layout.tsx   ← layout root (berlaku untuk semua halaman)
│   │   ├── page.tsx     ← halaman beranda (/)
│   │   ├── globals.css  ← CSS global
│   │   ├── about/
│   │   │   └── page.tsx ← halaman /about
│   │   └── blog/
│   │       ├── page.tsx        ← halaman /blog
│   │       └── [slug]/
│   │           └── page.tsx    ← halaman /blog/nama-artikel
│   └── components/      ← komponen reusable
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

Langkah 3: Memahami App Router - Routing Berbasis File

Salah satu fitur paling kuat Next.js adalah file-based routing. Setiap folder di dalam app/ yang memiliki file page.tsx secara otomatis menjadi sebuah URL.

Membuat Halaman Baru

Buat folder src/app/tentang/ dan file page.tsx di dalamnya:

// src/app/tentang/page.tsx
export default function TentangPage() {
  return (
    <main className="container mx-auto px-4 py-16">
      <h1 className="text-4xl font-bold mb-6">Tentang Kami</h1>
      <p className="text-lg text-gray-600">
        Kami adalah tim developer yang bersemangat membangun
        solusi digital terbaik untuk bisnis Anda.
      </p>
    </main>
  );
}

Sekarang buka http://localhost:3000/tentang - halaman sudah bisa diakses! Tidak perlu konfigurasi routing apapun.

Layout dan Navigasi Global

File src/app/layout.tsx adalah layout root yang membungkus semua halaman. Di sinilah tempat meletakkan Navbar dan Footer:

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: {
    template: "%s | Nama Website",
    default: "Nama Website - Solusi Digital Terpercaya",
  },
  description: "Deskripsi website Anda untuk SEO.",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id">
      <body className={inter.className}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Langkah 4: Server Components vs Client Components

Ini adalah konsep terpenting yang membedakan Next.js modern dari React biasa. Memahami perbedaan ini akan membuat Anda bisa membangun website yang lebih cepat dan efisien.

Server Components (Default)

Secara default, semua komponen di App Router adalah Server Components - dirender di server, bukan di browser pengguna. Keuntungannya:

• Bisa langsung mengakses database, file system, atau API internal tanpa expose ke client
• Tidak menambah ukuran JavaScript yang dikirim ke browser
• Lebih cepat untuk konten yang tidak interaktif
• SEO-friendly karena HTML sudah ada saat halaman dimuat

// src/app/blog/page.tsx - Server Component (default)
// Tidak perlu "use client" - ini berjalan di server

async function getArtikel() {
  const res = await fetch("https://api.contoh.com/artikel", {
    next: { revalidate: 3600 }, // cache 1 jam (ISR)
  });
  return res.json();
}

export default async function BlogPage() {
  const artikel = await getArtikel(); // langsung fetch di server!

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {artikel.map((post: { id: number; title: string; slug: string }) => (
          <li key={post.id}>
            <a href={"/blog/" + post.slug}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

Client Components

Gunakan Client Components untuk bagian yang memerlukan interaktivitas: event handler, useState, useEffect, atau Web APIs seperti localStorage. Tandai dengan directive "use client" di baris pertama file:

"use client";
// src/components/SearchBar.tsx

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function SearchBar() {
  const [query, setQuery] = useState("");
  const router = useRouter();

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (query.trim()) {
      router.push("/cari?q=" + encodeURIComponent(query));
    }
  };

  return (
    <form onSubmit={handleSearch} className="flex gap-2">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Cari artikel..."
        className="border rounded-lg px-4 py-2 flex-1"
      />
      <button
        type="submit"
        className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
      >
        Cari
      </button>
    </form>
  );
}

Langkah 5: Navigasi dengan Komponen Link

Gunakan komponen <Link> dari Next.js (bukan tag <a> biasa) untuk navigasi antar halaman. Link dari Next.js melakukan prefetching otomatis sehingga perpindahan halaman terasa instan:

// src/components/Navbar.tsx
import Link from "next/link";

export default function Navbar() {
  return (
    <header className="border-b bg-white sticky top-0 z-50">
      <nav className="container mx-auto px-4 h-16 flex items-center justify-between">
        <Link href="/" className="text-xl font-bold text-blue-600">
          NamaWebsite
        </Link>
        <ul className="flex items-center gap-8">
          <li><Link href="/" className="hover:text-blue-600">Beranda</Link></li>
          <li><Link href="/tentang" className="hover:text-blue-600">Tentang</Link></li>
          <li><Link href="/blog" className="hover:text-blue-600">Blog</Link></li>
          <li><Link href="/kontak" className="hover:text-blue-600">Kontak</Link></li>
        </ul>
      </nav>
    </header>
  );
}

Langkah 6: Halaman Dinamis (Dynamic Routes)

Untuk halaman dengan konten berbeda-beda berdasarkan URL - seperti halaman detail blog atau halaman produk - gunakan Dynamic Routes dengan nama folder dalam kurung siku:

// src/app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>;
}

async function getArtikel(slug: string) {
  const res = await fetch("https://api.contoh.com/artikel/" + slug);
  if (!res.ok) return null;
  return res.json();
}

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const artikel = await getArtikel(slug);
  return {
    title: artikel?.title ?? "Artikel Tidak Ditemukan",
    description: artikel?.excerpt ?? "",
  };
}

export default async function BlogDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const artikel = await getArtikel(slug);

  if (!artikel) {
    return <div>Artikel tidak ditemukan.</div>;
  }

  return (
    <article className="container mx-auto px-4 py-16 max-w-3xl">
      <h1 className="text-4xl font-bold mb-4">{artikel.title}</h1>
      <p className="text-gray-500 mb-8">{artikel.date}</p>
      <div
        className="prose prose-lg"
        dangerouslySetInnerHTML={{ __html: artikel.content }}
      />
    </article>
  );
}

Langkah 7: Optimasi SEO dengan Metadata API

Next.js menyediakan Metadata API yang powerful untuk mengatur meta tags SEO secara terpusat dan type-safe. Ini adalah cara yang direkomendasikan untuk mengelola SEO di Next.js:

// src/app/blog/page.tsx - contoh metadata statis
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Blog - Tips Web Development dan Hosting Indonesia",
  description:
    "Temukan artikel-artikel terbaru seputar web development, tips SEO, panduan hosting, dan teknologi terkini untuk developer Indonesia.",
  keywords: ["web development", "hosting indonesia", "tutorial nextjs", "seo"],
  openGraph: {
    title: "Blog - Tips Web Development dan Hosting Indonesia",
    description: "Artikel terbaru seputar web development dan hosting.",
    url: "https://namawebsite.com/blog",
    siteName: "NamaWebsite",
    locale: "id_ID",
    type: "website",
  },
  alternates: {
    canonical: "https://namawebsite.com/blog",
  },
};

robots.txt dan sitemap.xml Otomatis

Next.js bisa menggenerate robots.txt dan sitemap.xml secara otomatis. Buat file-file berikut:

// src/app/robots.ts
import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://namawebsite.com/sitemap.xml",
  };
}

// src/app/sitemap.ts
import type { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: "https://namawebsite.com", lastModified: new Date() },
    { url: "https://namawebsite.com/tentang", lastModified: new Date() },
    { url: "https://namawebsite.com/blog", lastModified: new Date() },
  ];
}

Langkah 8: API Routes - Backend dalam Satu Proyek

Next.js memungkinkan Anda membuat endpoint API langsung dalam proyek yang sama menggunakan Route Handlers. Buat file route.ts di dalam folder app/api/:

// src/app/api/kontak/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { nama, email, pesan } = body;

    if (!nama || !email || !pesan) {
      return NextResponse.json(
        { error: "Semua field wajib diisi." },
        { status: 400 }
      );
    }

    // Di sini bisa kirim email, simpan ke database, dll.
    console.log("Pesan baru dari:", nama, email);

    return NextResponse.json(
      { success: true, message: "Pesan berhasil dikirim!" },
      { status: 200 }
    );
  } catch {
    return NextResponse.json(
      { error: "Terjadi kesalahan server." },
      { status: 500 }
    );
  }
}

Langkah 9: Optimasi Performa

Next.js menyediakan berbagai fitur bawaan untuk performa optimal:

Font Optimization

// src/app/layout.tsx
import { Inter, Poppins } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "600", "700"],
  variable: "--font-poppins",
});

Next.js secara otomatis mengunduh font Google ke server Anda sendiri - tidak ada request ke Google Fonts dari browser pengguna, sehingga lebih cepat dan lebih privat.

Tips Optimasi Performa Lainnya

• Gunakan Server Components sebanyak mungkin - kurangi JavaScript di client
• Implementasikan Streaming dengan Suspense - tampilkan konten secara bertahap
• Manfaatkan ISR - revalidate halaman secara berkala tanpa rebuild penuh
• Aktifkan output: "standalone" di next.config.ts untuk deployment yang lebih ringan
• Gunakan CDN seperti Cloudflare di depan server Anda untuk caching global

Langkah 10: Build dan Deploy Website Next.js

Setelah website selesai, saatnya deploy ke hosting agar bisa diakses publik.

Build untuk Production

# Build aplikasi
npm run build

# Test hasil build secara lokal
npm run start

Opsi 1: Deploy ke Vercel (Termudah)

Vercel adalah platform buatan tim Next.js sendiri - paling mudah dan paling dioptimasi:

1. Push kode ke repository GitHub
2. Login ke vercel.com menggunakan akun GitHub
3. Klik "New Project" dan pilih repository Anda
4. Vercel otomatis mendeteksi Next.js dan mengkonfigurasi semua build settings
5. Tambahkan environment variables (jika ada) lalu klik "Deploy"

Dalam 1-3 menit website Anda sudah live dengan SSL gratis dan domain .vercel.app. Hubungkan domain kustom Anda melalui Settings → Domains di dashboard Vercel.

Opsi 2: Deploy ke VPS dengan Nginx dan PM2

# Di VPS (Ubuntu 22.04) - install Node.js
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt install -y nodejs nginx
npm install -g pm2

# Clone dan build
git clone https://github.com/username/repo.git /var/www/nextjs-app
cd /var/www/nextjs-app
npm ci
npm run build

# Jalankan dengan PM2
pm2 start npm --name "nextjs-app" -- start
pm2 save && pm2 startup

FAQ: Cara Membuat Website dengan Next.js

Kesimpulan

Belajar cara membuat website dengan Next.js adalah investasi yang sangat worth it di tahun 2026. Dengan ekosistem React yang sudah Anda kenal ditambah kekuatan penuh framework Next.js - mulai dari App Router yang intuitif, Server Components yang revolusioner, Metadata API untuk SEO, hingga API Routes untuk backend - Anda memiliki semua yang dibutuhkan untuk membangun website modern yang cepat, SEO-friendly, dan mudah di-maintain.

Kunci keberhasilan adalah praktik langsung. Mulailah dengan membuat website sederhana seperti portfolio atau blog personal, lalu secara bertahap tambahkan fitur yang lebih kompleks. Setiap halaman baru, setiap komponen yang Anda buat, dan setiap masalah yang Anda selesaikan adalah pelajaran berharga yang membentuk keahlian Anda.

Ketika website Next.js Anda siap go-live, pastikan memilih layanan hosting yang tepat sesuai kebutuhan. Untuk pemula, mulai dengan Vercel yang gratis dan mudah. Ketika traffic mulai tumbuh dan kebutuhan kontrol meningkat, pertimbangkan VPS Indonesia untuk performa lokal yang optimal dan biaya yang lebih terprediktabel. Dengan hosting yang solid, website Next.js Anda siap melayani pengguna dengan cepat dan andal.