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

Muhammad Akil Juni 24, 2026


Pelajari cara menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 terbaru, lengkap dengan contoh kode, best practice, dan tips produksi yang siap pakai pada Juni 2026.

1. Prasyarat dan Persiapan Lingkungan

Sebelum memulai, pastikan Anda memiliki:

  • Node.js versi 20.10.0 atau lebih baru (LTS).
  • npm 10.5.0 atau Yarn 4 (Berry).
  • Git untuk version control.
  • Editor kode modern, misalnya VS Code dengan ekstensi ESLint dan Prettier.

Jika belum ada, instal Node.js melalui website resmi atau gunakan nvm untuk manajemen versi.

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app --typescript --eslint --tailwind
cd my-next14-app

Perintah di atas men‑setup proyek dengan TypeScript, ESLint, dan Tailwind CSS—kombinasi yang menjadi standar di 2026. Pilihan --experimental-app tidak diperlukan lagi karena App Router sudah menjadi default sejak versi 14.

3. Struktur Direktori App Router

Next.js 14 menggunakan folder app sebagai root routing. Berikut struktur penting:

app/
├─ layout.tsx          # Root layout
├─ page.tsx            # Halaman utama (/) 
├─ dashboard/
│   ├─ layout.tsx      # Layout khusus dashboard
│   └─ page.tsx        # /dashboard
├─ api/
│   └─ route.ts        # API Route (Server‑only)
└─ loading.tsx         # UI loading state global

Folder pages masih didukung untuk backward compatibility, tetapi disarankan beralih sepenuhnya ke app untuk memanfaatkan React Server Components (RSC) secara penuh.

4. Konfigurasi Dasar – next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true, // Fitur baru di 14 untuk aksi server-side langsung di komponen
    appDir: true,
  },
  images: {
    remotePatterns: [{ protocol: 'https', hostname: '**' }],
  },
  i18n: {
    locales: ['en', 'id'],
    defaultLocale: 'en',
  },
};
export default nextConfig;

Pengaturan di atas mengaktifkan Server Actions, mengaktifkan optimasi gambar, dan menyiapkan i18n dasar.

5. Membuat Root Layout dengan Server Component

// app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Next.js 14 App',
  description: 'Demo modern Next.js dengan App Router & RSC',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Server‑side fetch contoh data global
  const navLinks = await fetch('https://api.example.com/nav', {
    next: { revalidate: 3600 },
  }).then(res => res.json());

  return (
    
      
        
        {children}
      
    
  );
}

Catatan:

  • Komponen ini berjalan di server, sehingga fetch dapat langsung dipanggil tanpa useEffect.
  • Gunakan next: { revalidate } untuk ISR (Incremental Static Regeneration).

6. Membuat Halaman Berbasis Server Component

// app/page.tsx
export const revalidate = 60; // Refresh tiap menit

export default async function HomePage() {
  const articles = await fetch('https://api.example.com/articles?limit=5', {
    next: { revalidate: 60 },
  }).then(res => res.json());

  return (
    

      
Latest Articles

      
    
        {articles.map((a: any) => (
          
  • 
            {a.title}
            
    {a.excerpt}
    
          
    • 
        ))}
      

    

  );
}

Halaman ini sepenuhnya server‑side, sehingga tidak ada bundle JavaScript di client kecuali yang diperlukan untuk interaktivitas tambahan.

7. Menambahkan Interaktivitas dengan Server Actions

// app/dashboard/page.tsx
'use client'; // Mark as client component for interactivity
import { useState, useTransition } from 'react';

export default function Dashboard() {
  const [name, setName] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    startTransition(async () => {
      const res = await fetch('/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name }),
      });
      const data = await res.json();
      alert(`Saved: ${data.id}`);
    });
  }

  return (
    

      
Dashboard (Client)

      

         setName(e.target.value)}
          placeholder="Enter name"
          className="border p-2 rounded w-full"
          required
        />
        
      

    

  );
}

Catatan penting:

  • File yang mengandung 'use client' menjadi Client Component, memungkinkan penggunaan state dan event.
  • Server Actions (dengan fetch('/api/...')) tetap aman karena dijalankan di API Routes yang terisolasi.

8. Membuat API Route dengan Edge Runtime

// app/api/submit/route.ts
import { NextResponse } from 'next/server';

export const runtime = 'edge'; // Menggunakan V8 isolate, latency rendah

export async function POST(request: Request) {
  const { name } = await request.json();
  // Simulasi penyimpanan, misal ke Supabase atau PlanetScale
  const id = crypto.randomUUID();
  // Di production, gunakan DB client dengan connection pooling di edge.
  return NextResponse.json({ id, name }, { status: 201 });
}

Edge runtime cocok untuk fungsi ringan seperti validasi atau logging karena overhead hampir nol.

9. Optimasi Build & Deployment

Gunakan Vercel (platform resmi Next.js) atau Fly.io** untuk workload edge. Berikut contoh vercel.json:

{
  "version": 3,
  "routes": [{ "src": "/(.*)", "dest": "/$1" }],
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api/$1" }],
  "functions": {
    "api/**": { "runtime": "edge" }
  }
}

Tambahan best practice:

  • Aktifkan output: 'standalone' di next.config.js untuk container‑friendly build.
  • Gunakan next/image dengan fill dan priority untuk LCP optimal.
  • Implementasikan next/font untuk font loading otomatis.

10. CI/CD dengan GitHub Actions

# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npm run build
      - name: Vercel Deploy
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          prod: true

Pipeline ini memastikan lint, test (jika ada), dan build otomatis sebelum deploy.

11. Security & Performance Checklist

  • Content Security Policy (CSP) – Tambahkan header melalui next.config.js atau middleware.
  • Rate limiting pada API Edge dengan @upstash/ratelimit (Redis serverless).
  • Image Optimization – Pastikan next/image meng‑serve WebP/AVIF.
  • Bundle Analysis – Jalankan npm run analyze (next‑bundle‑analyzer) untuk mengidentifikasi kode berlebih.
  • Lazy Loading – Gunakan next/dynamic untuk komponen client yang tidak kritis.

12. Testing dengan Playwright & Vitest

# Instalasi
npm i -D playwright vitest @testing-library/react

# contoh test unit (vitest)
// __tests__/Home.test.tsx
import { render, screen } from '@testing-library/react';
import HomePage from '@/app/page';

test('renders heading', async () => {
  render(await HomePage());
  expect(screen.getByRole('heading', { name: /latest articles/i })).toBeInTheDocument();
});

# contoh e2e (playwright)
// tests/e2e.spec.ts
import { test, expect } from '@playwright/test';

test('homepage loads articles', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.locator('h1')).toHaveText(/latest articles/i);
  await expect(page.locator('ul li')).toHaveCount(5);
});

Jalankan npm run test untuk unit dan npx playwright test untuk e2e.

13. Deploy ke Production & Monitoring

Setelah berhasil di‑deploy, pasang monitoring:

  • Vercel Analytics – LCP, CLS, FID real‑time.
  • LogRocket atau Sentry untuk error tracking client‑side.
  • Datadog atau Prometheus pada edge functions untuk latency.

Dengan konfigurasi di atas, aplikasi Next.js 14 siap melayani traffic global dengan performa optimal dan keamanan modern.


Next.js 14 membawa evolusi signifikan lewat App Router, React Server Components, dan Server Actions. Dengan mengikuti tutorial step‑by‑step ini—mulai dari instalasi, struktur folder, kode server‑side, hingga CI/CD dan monitoring—Anda dapat membangun aplikasi web modern yang cepat, aman, dan mudah di‑scale pada 2026. Terapkan best practice yang dibahas, terus pantau performa lewat analytics, dan manfaatkan ekosistem plugin seperti Tailwind, Vitest, serta Playwright untuk menjaga kualitas kode sepanjang siklus hidup proyek.
Panduan lengkap setup Next.js 14 dengan App Router, React Server Components, dan Server Actions. Langkah demi langkah, contoh kode, konfigurasi, CI/CD, serta best practice untuk produksi pada 2026.

Programming,Software Engineering,Web Development,Next.js 14,App Router,React Server Components,Server Actions,CI/CD,Docker,Kubernetes

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar