Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Performance

Next.js 14 membawa fitur-fitur revolusioner seperti App Router yang lebih fleksibel, Server Actions untuk logika back‑end di dalam komponen React, dan peningkatan performa yang signifikan. Tutorial ini memberi Anda langkah‑langkah praktis—dari instalasi hingga best practice—agar proyek Anda siap produksi pada Mei 2026.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki alat berikut terinstall pada mesin development:

• Node.js v20.x (direkomendasikan LTS terbaru)
• npm v10 atau Yarn v4
• Git untuk version control
• Editor kode modern, misalnya VS Code dengan ekstensi ESLint dan Tailwind CSS IntelliSense

Verifikasi instalasi dengan perintah:

node -v
npm -v

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app dengan flag --ts untuk TypeScript dan --app untuk mengaktifkan App Router secara default.

npx create-next-app@latest my-next14-app --ts --app
cd my-next14-app

Perintah di atas menghasilkan struktur folder berikut:

my-next14-app/
├─ app/               # App Router root
├─ public/
├─ src/
│   └─ app/           # (alternatif jika menggunakan src dir)
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Instalasi Dependensi Tambahan

Untuk styling cepat, tambahkan Tailwind CSS dan Headless UI. Selain itu, instal dotenv untuk variabel lingkungan.

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p
npm i @headlessui/react classnames
npm i dotenv

Konfigurasikan tailwind.config.js:

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

Jangan lupa menambahkan @tailwind base;, @tailwind components;, dan @tailwind utilities; ke app/globals.css.

4. Mengaktifkan Server Actions

Server Actions memungkinkan Anda menulis fungsi async yang dieksekusi di server tanpa membuat API route terpisah. Aktifkan experimental flag di next.config.mjs:

export default defineConfig({
  experimental: { serverActions: true },
});

Contoh penggunaan di app/page.tsx:

import { revalidatePath } from "next/cache";

export async function updateGreeting(name: string) {
  // Logika server, misalnya menyimpan ke DB (mock di sini)
  await new Promise(r => setTimeout(r, 500));
  // Opsional: revalidate cache agar UI otomatis refresh
  revalidatePath("/");
  return `Hello, ${name}!`; // nilai akan dikirim kembali ke client
}

export default function Home() {
  const [greeting, setGreeting] = React.useState("Hello, Guest!");

  async function handleSubmit(e) {
    e.preventDefault();
    const form = new FormData(e.target);
    const name = String(form.get("name"));
    const result = await updateGreeting(name);
    setGreeting(result);
  }

  return (
    

      
{greeting}
      

        
        
      
    
  );
}

Catatan: Server Actions hanya dapat dipanggil dari komponen React yang berada di dalam app/ directory.

5. Konfigurasi Routing dengan App Router

App Router menggantikan pages/ dengan app/. Setiap folder menjadi route segment. Contoh menambahkan halaman profil dengan layout bersarang:

app/
├─ layout.tsx          # Root layout (html, body, font)
├─ page.tsx            # Home (/)
├─ profile/
│   ├─ layout.tsx      # Layout khusus profil
│   ├─ page.tsx        # /profile
│   └─ [userId]/
│       └─ page.tsx    # /profile/:userId

Isi app/profile/layout.tsx untuk menambahkan navigasi lateral:

export default function ProfileLayout({ children }: { children: React.ReactNode }) {
  return (
    

      
Sidebar
      
{children}
    
  );
}

6. Optimasi Performans dengan Streaming & Edge Middleware

Next.js 14 mendukung streaming HTML langsung dari server. Pada halaman yang menampilkan data yang harus dipanggil secara async, gunakan export const runtime = "edge"; untuk mengeksekusi di Vercel Edge Network atau Cloudflare Workers.

// app/blog/[slug]/page.tsx
export const runtime = "edge";

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());
  return (
    

      
{post.title}
      

    
  );
}

Gunakan next/image dengan priority dan placeholder="blur" untuk gambar kritikal. Pastikan next.config.mjs mempunyai images: { domains: ["example.com"] }.

7. Penambahan CI/CD dengan GitHub Actions

Berikut workflow sederhana yang membuild, lint, dan deploy ke Vercel setiap push ke main:

name: CI/CD
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Lint
        run: npm run lint
      - name: Build
        run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: "--prod"
          working-directory: .

Pastikan VERCEL_TOKEN dan VERCEL_ORG_ID disimpan di Secrets repo.

8. Best Practice untuk Production Ready

• Type Safety: Selalu gunakan TypeScript; aktifkan strict:true di tsconfig.json.
• Cache Strategy: Manfaatkan revalidate di fetch dan next/cache untuk ISR (Incremental Static Regeneration).
• Security: Set header CSP via next.config.mjs atau middleware; gunakan helmet di edge jika diperlukan.
• Image Optimization: Gunakan built‑in next/image dan CDN.
• Monitoring: Integrasikan dengan Vercel Analytics atau Sentry untuk error tracking.

9. Deploy ke Vercel (Free Tier)

1. Push repository ke GitHub. 2. Buka vercel.com dan import project. 3. Vercel otomatis mendeteksi next.config.mjs dan mengaktifkan app/ routing. 4. Atur environment variables (misal DATABASE_URL) di dashboard Vercel. 5. Deploy selesai—URL publik siap.

10. Testing dan Debugging

Gunakan Jest + React Testing Library untuk unit test, dan Cypress untuk end‑to‑end.

# Install testing stack
npm i -D jest @testing-library/react @testing-library/jest-dom ts-jest
npm i -D cypress

# contoh unit test di __tests__/Home.test.tsx
import { render, screen } from "@testing-library/react";
import Home from "../app/page";

test("renders greeting", () => {
  render();
  expect(screen.getByText(/Hello, Guest!/i)).toBeInTheDocument();
});

Debug server actions dengan console.log di fungsi server; output akan muncul di log Vercel atau terminal lokal.

Dengan mengikuti langkah‑langkah di atas, Anda telah menyiapkan proyek Next.js 14 yang memanfaatkan App Router, Server Actions, streaming Edge, serta pipeline CI/CD modern. Mengikuti best practice—type safety, caching, dan security—akan memastikan aplikasi Anda siap skala produksi, cepat, dan mudah dipelihara. Selamat membangun!

---

Panduan lengkap Next.js 14 2026: instalasi, App Router, Server Actions, streaming Edge, CI/CD, dan best practice untuk performa optimal.

Programming,Software Engineering,Web Development,Next.js,App Router,Server Actions

#Programming #SoftwareEngineering #WebDev #Tech #Coding