Panduan Lengkap Setup Next.js 14 dengan App Router & React Server Components (2026)

Next.js 14 memperkenalkan App Router yang diperkaya dengan React Server Components, meningkatkan performa dan developer experience. Ikuti tutorial step‑by‑step ini untuk memulai proyek baru, mengkonfigurasi lingkungan, menulis kode contoh, dan menerapkan best practice modern.

1. Persiapan Lingkungan

Pastikan Node.js versi 20.12+ terinstall. Anda dapat memeriksa versi dengan node -v. Jika belum, unduh dari nodejs.org atau gunakan nvm:

nvm install 20
nvm use 20

Instalasi pnpm (package manager rekomendasi oleh Vercel) untuk kecepatan cache yang optimal:

npm install -g pnpm

2. Membuat Proyek Next.js 14 Baru

Gunakan create‑next‑app dengan flag --app untuk mengaktifkan App Router secara otomatis:

pnpm create next-app@latest my-next14-app -- --app

Perintah di atas menghasilkan struktur folder berikut:

my-next14-app/
 ├─ app/               # App Router (new)
 ├─ public/
 ├─ styles/
 ├─ next.config.mjs   # konfigurasi ESM
 └─ package.json

3. Konfigurasi Dasar

Ubah next.config.mjs untuk mengaktifkan fitur eksperimental yang masih diperlukan pada rilis awal:

export default defineConfig({
  experimental: {
    appDir: true,
    serverActions: true,
    serverComponentsExternalPackages: ["@mui/material"]
  },
  images: {
    remotePatterns: [{ hostname: "images.unsplash.com" }]
  }
});

Pastikan file berformat ESM (menggunakan .mjs) karena Next.js 14 beralih penuh ke ESM.

4. Struktur App Router

Di dalam folder app, buat layout dan page dasar:

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    
      
        
      
      
        {children}
      
    
  );
}

// app/page.jsx (Server Component default)
export default async function HomePage() {
  const data = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await data.json();
  return (
    

      
Next.js {repo.name} v{repo.version}
      
{repo.description}
    
  );
}

Catatan: Karena ini Server Component, kode dapat melakukan fetch langsung pada server tanpa menulis API route.

5. Menambahkan Client Component

Untuk interaktivitas (mis. counter), buat komponen client dengan 'use client':

// components/Counter.jsx
"use client";
import { useState } from "react";
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    
  );
}

Gunakan di halaman server:

// app/page.jsx (lanjutan)
import Counter from "../components/Counter";
export default async function HomePage() {
  // …fetch logic di atas
  return (
    

      
Next.js Demo
      
    
  );
}

6. Mengintegrasikan Tailwind CSS (v4) & Shadcn UI

Instalasi Tailwind:

pnpm add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss autoprefixer
npx tailwindcss init -p

Update tailwind.config.js untuk mendukung App Router:

module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: { extend: {} },
  plugins: [],
};

Tambah @tailwind directives di app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Instalasi Shadcn UI (komponen ready‑to‑use yang kompatibel dengan Server Components):

pnpm dlx shadcn-ui@latest init
pnpm dlx shadcn-ui@latest add button card

7. Deploy ke Vercel (Edge Runtime)

Pastikan vercel.json mengaktifkan Edge Functions untuk SSR yang lebih cepat:

{
  "regions": ["cdg1", "iad1"],
  "functions": {
    "app/**": {
      "runtime": "edge"
    }
  }
}

Commit semua perubahan, lalu hubungkan repo ke Vercel melalui dashboard. Vercel otomatis mendeteksi next.config.mjs dan melakukan build dengan pnpm build.

8. Best Practice untuk Next.js 14

• Gunakan Server Components untuk fetch data – mengurangi bundle size di client.
• Minimalisir penggunaan use client – hanya pada interaksi UI.
• Cache fetch dengan fetch(..., { next: { revalidate: 60 } }) untuk ISR (Incremental Static Regeneration).
• Static Metadata – definisikan export const metadata = { title, description } di setiap route untuk SEO otomatis.
• Linting & TypeScript – tambahkan eslint-config-next dan tsconfig.json untuk konsistensi kode.

9. Testing dengan Playwright

Instalasi:

pnpm add -D @playwright/test
npx playwright install

Contoh test e2e:

// tests/home.spec.ts
import { test, expect } from "@playwright/test";

test("homepage renders", async ({ page }) => {
  await page.goto("/");
  await expect(page.locator("h1")).toContainText("Next.js Demo");
  await expect(page.locator("button")).toHaveText("Klik: 0");
});

Jalankan dengan pnpm exec playwright test.

10. Optimasi Produksi

1. Aktifkan next/font untuk font otomatis optimasi.
2. Gunakan image component dengan loader: "custom" bila sumber gambar eksternal.
3. Set compress: true di next.config.mjs untuk gzip & brotli.
4. Monitoring: Tambahkan @vercel/analytics atau integrasi Sentry.

Dengan mengikuti langkah di atas, proyek Next.js 14 Anda siap untuk skala produksi, memanfaatkan keunggulan App Router, React Server Components, dan ekosistem modern.

Next.js 14 membuka era baru bagi pengembang web dengan arsitektur berbasis Server Components dan App Router yang lebih terstruktur. Tutorial ini memberikan fondasi lengkap—dari instalasi, konfigurasi, contoh kode, hingga best practice dan CI/CD—sehingga Anda dapat membangun aplikasi React yang cepat, aman, dan mudah dikelola. Terapkan langkah-langkah ini, pantau performa di Vercel, dan terus eksplorasi fitur eksperimental yang akan menjadi standar di generasi selanjutnya.

---

Panduan lengkap setup Next.js 14 dengan App Router, React Server Components, Tailwind, Shadcn UI, deployment Vercel, dan best practice 2026.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding