Next.js 14 menjadi standar baru untuk pengembangan React full‑stack. Tutorial ini memberi langkah demi langkah instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi modern yang siap produksi.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js v20.x atau yang lebih baru (direkomendasikan LTS 20.15)
  • npm v10 atau Yarn v4
  • Git untuk version control
  • Editor kode, misalnya VS Code dengan ekstensi ESLint dan Prettier

Jika belum terinstall, unduh Node.js dari nodejs.org dan verifikasi versi:

node -v
npm -v

2. Membuat Project Next.js 14 Baru

Gunakan perintah create-next-app@latest yang otomatis meng‑install versi terbaru.

npx create-next-app@latest my-next14-app
# Pilih "Yes" untuk TypeScript jika diinginkan
# Pilih "App Router" saat ditanya
cd my-next14-app

Struktur folder utama akan terlihat seperti:

app/          # App Router (new)
pages/        # legacy, tetap ada untuk fallback
public/       # static assets
styles/       # CSS/SCSS
next.config.mjs
tsconfig.json (jika TypeScript)

3. Instalasi Dependency Tambahan

Berikut beberapa paket yang sering dipakai bersama Next.js 14:

npm i tailwindcss@latest postcss@latest autoprefixer@latest
npm i @tanstack/react-query@latest
npm i zod@latest
npm i prisma@latest @prisma/client
npm i next-auth@latest
# Dev tools
npm i -D eslint prettier eslint-config-next

Jalankan inisialisasi Tailwind:

npx tailwindcss init -p

Sesuaikan tailwind.config.ts untuk mendukung app directory:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

4. Konfigurasi Next.js (next.config.mjs)

export default defineConfig({
  reactStrictMode: true,
  experimental: {
    serverActions: true, // aktifkan Server Actions
  },
  images: {
    remotePatterns: [{ hostname: "images.unsplash.com" }],
  },
});

Konfigurasi di atas mengaktifkan fitur eksperimental Server Actions yang stabil sejak Next.js 14, serta menyiapkan remote image loading.

5. Membuat Layout Global dengan Server Component

// app/layout.tsx
import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "My Next.js 14 App",
  description: "Demo app with App Router and Server Actions",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
Next.js 14 Demo

        
{children}

      
    
  );
}

6. Implementasi Server Action untuk Formulir Kontak

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

// app/contact/page.tsx
"use server";
import { redirect } from "next/navigation";
import { z } from "zod";

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  message: z.string().min(10),
});

async function sendContact(formData: FormData) {
  const data = Object.fromEntries(formData.entries());
  const result = schema.safeParse(data);
  if (!result.success) {
    // Throw to client side validation error
    throw new Error("Validation failed");
  }
  // Simulasi penyimpanan, misalnya ke Prisma atau webhook
  console.log("Contact submitted:", result.data);
  // Setelah sukses, redirect ke halaman terima kasih
  redirect("/contact/thanks");
}

export default function ContactPage() {
  return (