Temukan langkah demi langkah cara menginstal, mengonfigurasi, dan mengoptimalkan proyek Next.js 14 terbaru, lengkap dengan contoh kode, best practice, serta integrasi Server Actions untuk meningkatkan produktivitas dan keamanan aplikasi web modern.

1. Prasyarat dan Persiapan Lingkungan

Pastikan mesin Anda memenuhi persyaratan berikut:

  • Node.js v20.10+ (LTS terbaru pada Juli 2026).
  • npm v10.5+ atau yarn 4+.
  • Git untuk version control.
  • Editor kode pilihan (VS Code disarankan) dengan ekstensi Next.js dan ESLint.

2. Instalasi Next.js 14 – Project Baru

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

Perintah di atas membuat proyek berbasis TypeScript dengan struktur standar. Tambahkan flag --experimental-app bila Anda ingin mengaktifkan App Router secara eksplisit (meskipun di v14 sudah default).

3. Mengaktifkan App Router

Next.js 14 memperkenalkan App Router yang menggantikan pages/. Pastikan folder app/ ada di root proyek. Jika tidak, buat secara manual:

mkdir app

Contoh struktur minimal:

app/
├─ layout.tsx
├─ page.tsx
└─ (dashboard)/
   ├─ layout.tsx
   └─ page.tsx

3.1. layout.tsx

import './globals.css';

export const metadata = {
  title: 'Next.js 14 – App Router Demo',
  description: 'Demo aplikasi dengan App Router dan Server Actions',
};

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

3.2. page.tsx (beranda)

export default function HomePage() {
  return (
    

      
Selamat Datang di Next.js 14

      
Ini contoh halaman utama menggunakan App Router.

    

  );
}

4. Memanfaatkan Server Actions (Beta di v14)

Server Actions memungkinkan Anda menulis fungsi async yang dieksekusi di server tanpa API route terpisah. Berikut contoh pembuatan form kontak.

4.1. Membuat file action.ts

"use server";
import { revalidatePath } from 'next/cache';

export async function submitContact(formData: FormData) {
  const name = formData.get('name')?.toString() ?? '';
  const email = formData.get('email')?.toString() ?? '';
  const message = formData.get('message')?.toString() ?? '';

  // Simulasi penyimpanan ke DB (misalnya Prisma)
  // await prisma.contact.create({ data: { name, email, message } });
  console.log('Contact submitted:', { name, email, message });

  // Optional: revalidate path untuk ISR
  revalidatePath('/contact/thanks');
  return { success: true };
}

4.2. Form di page.tsx

import { submitContact } from './action';

export default function ContactPage() {
  return (
    
 {/* otomatis menjadi Server Action */}