Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini memberi Anda langkah‑demi‑langkah instalasi, konfigurasi, contoh kode, dan best practice agar proyek Anda siap produksi di tahun 2026.

1. Prasyarat

Sebelum memulai, pastikan Anda telah menginstal:

  • Node.js v20.10+ (download di nodejs.org)
  • Git untuk version control
  • Editor code, misalnya VS Code dengan ekstensi ESLint dan Prettier

2. Membuat Proyek Next.js 14

Jalankan perintah berikut di terminal Anda:

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

Parameter --ts menambahkan TypeScript, --eslint mengaktifkan linting, dan --app membuat struktur App Router secara otomatis.

3. Mengaktifkan Turbopack (bundler default)

Next.js 14 sudah mengganti Webpack dengan Turbopack untuk build yang jauh lebih cepat. Tidak ada konfigurasi ekstra, namun Anda dapat menyesuaikan next.config.js jika perlu:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // contoh: menambah environment variable
  env: {
    API_URL: process.env.API_URL || 'https://api.example.com',
  },
  // menonaktifkan fallback ke webpack (hanya diperlukan untuk legacy plugin)
  webpack: (config) => {
    config.ignoreWarnings = [/Failed to parse source map/];
    return config;
  },
};
module.exports = nextConfig;

4. Memahami Struktur App Router

Folder app/ menggantikan pages/. Berikut contoh dasar:

/app
  /layout.tsx          // layout global
  /page.tsx            // halaman beranda
  /dashboard
    /layout.tsx        // layout khusus dashboard
    /page.tsx          // konten dashboard
    /settings
      /page.tsx        // nested route

Setiap folder dapat memiliki page.tsx (route), layout.tsx (wrapper), dan loading.tsx (skeleton UI).

5. Menambahkan Server Actions (Next.js 14)

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server tanpa API route terpisah. Buat file app/actions.ts:

'use server';
import { prisma } from '@/lib/prisma';

export async function createPost(data: { title: string; content: string }) {
  // Otomatis terproteksi CSRF oleh Next.js
  return await prisma.post.create({ data });
}

Lalu panggil di komponen client dengan 'use client':

'use client';
import { useState } from 'react';
import { createPost } from '@/app/actions';

export default function NewPostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await createPost({ title, content });
    setTitle('');
    setContent('');
    // Opsional: invalidate cache atau revalidate
  };

  return (
    

       setTitle(e.target.value)} placeholder="Title" required />