Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Artikel ini memberikan tutorial step‑by‑step untuk menginstal, mengkonfigurasi, dan menerapkan fitur terbaru seperti App Router, Server Actions, dan Streaming, lengkap dengan contoh kode dan best practice untuk Production‑ready.

1. Prasyarat dan Persiapan Lingkungan

Sebelum memulai, pastikan Anda memiliki:

  • Node.js >= 20.10 (LTS)
  • npm atau yarn (versi 9+)
  • Git untuk version control
  • Editor kode (VS Code direkomendasikan)

Verifikasi instalasi dengan:

node -v
npm -v

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app yang sudah ter‑update ke versi 14.

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

Flag --app secara otomatis membuat struktur App Router (folder app/) yang menggantikan pages/. Proyek akan berisi TypeScript, ESLint, dan lint‑staged siap pakai.

3. Menjalankan Development Server

npm run dev   # atau yarn dev

Buka http://localhost:3000 di browser. Anda sudah melihat halaman beranda default.

4. Memahami Struktur App Router

Folder app/ berisi:

  • layout.tsx – layout global (header, footer, metadata)
  • page.tsx – halaman utama
  • loading.tsx – UI loading untuk streaming
  • error.tsx – fallback error handling
  • Sub‑folder untuk route nested (mis. dashboard/)

Contoh layout sederhana

/* app/layout.tsx */
import './globals.css';

export const metadata = {
  title: 'Next.js 14 Starter',
  description: 'Demo App Router & Server Actions',
};

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

          
My Next.js 14 App

        

        {children}
        

          © {new Date().getFullYear()} Next.js 14 Demo
        

      
    
  );
}

5. Menambahkan Server Action (POST) untuk Formulir

Server Actions memungkinkan Anda menulis fungsi server langsung di komponen React tanpa API route terpisah.

Langkah 1: Buat Formulir di app/contact/page.tsx

/* app/contact/page.tsx */
'use client'; // Karena akan menggunakan useState di client
import { useState } from 'react';

export default function ContactPage() {
  const [status, setStatus] = useState('');

  async function submitForm(data: FormData) {
    'use server'; // Server Action marker
    const name = data.get('name');
    const message = data.get('message');
    // Simulasi penyimpanan (mis. DB atau API)
    console.log('Received', { name, message });
    // Return response yang bisa di‑handle di client
    return 'Success';
  }

  return (
    

      
Contact Us

      
 {/* Server Action */}