Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini memberikan langkah‑langkah detail mulai dari instalasi, konfigurasi, contoh kode, hingga best practice untuk keamanan dan performa, lengkap dengan tips debugging dan deployment ke Vercel.

1. Prasyarat dan Persiapan Lingkungan

Sebelum memulai, pastikan Anda memiliki:

  • Node.js versi 20.x atau lebih baru (node -v)
  • npm 10.x atau Yarn 4 (kelas terbaru)
  • Git untuk version control
  • Akun Vercel (opsional untuk deployment)

Jika belum terpasang, instal Node.js dari situs resmi dan verifikasi dengan perintah node -v serta npm -v.

2. Membuat Proyek Next.js 14 Baru

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

Parameter --ts menambahkan TypeScript, sementara --experimental-app mengaktifkan App Router (fitur standar di Next.js 14). Struktur folder utama akan terlihat seperti:

app/
  layout.tsx
  page.tsx
  api/
    route.ts
public/
next.config.mjs

Folder app menggantikan pages yang lama dan mendukung server components secara default.

3. Instalasi Dependensi Tambahan

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Konfigurasikan tailwind.config.cjs dengan content mengarah ke folder app:

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

Lalu tambahkan Tailwind directives ke app/globals.css:

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

4. Membuat Layout Global dengan Server Component

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

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'A modern full‑stack app with App Router & Server Actions',
};

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

Karena layout.tsx berada di server, Anda dapat mengakses env vars langsung tanpa mengekspor ke client.

5. Implementasi Server Action untuk Formulir Kontak

Server Actions memungkinkan Anda menulis fungsi async yang berjalan di server tapi dipanggil dari komponen client.

// app/contact/page.tsx
'use client';
import { useState, FormEvent } from 'react';

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

  async function sendMessage(formData: FormData) {
    'use server';
    const name = formData.get('name') as string;
    const email = formData.get('email') as string;
    const message = formData.get('message') as string;

    // Simulasi penyimpanan ke DB (misal Supabase atau Prisma)
    console.log('Menerima pesan', { name, email, message });
    return { ok: true };
  }

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const res = await sendMessage(formData);
    setStatus(res.ok ? 'Terima kasih! Pesan terkirim.' : 'Gagal mengirim');
  };

  return (
    

      
Hubungi Kami