Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan TypeScript

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React modern. Tutorial ini mengajarkan cara menginstal, mengonfigurasi, dan membangun fitur-fitur terkini seperti App Router, Server Actions, dan TypeScript dalam satu proyek siap produksi.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi LTS (v20.x atau lebih baru) dan npm atau pnpm terbaru. Verifikasi instalasi dengan:

node -v
npm -v  # atau pnpm -v

Jika belum terpasang, unduh Node.js dari nodejs.org dan instal pnpm secara global:

npm install -g pnpm

2. Membuat Proyek Next.js 14

Jalankan perintah berikut untuk membuat proyek baru dengan template app router dan TypeScript:

pnpm create next-app@latest my-next14-app --ts --app

Perintah ini akan menanyakan beberapa opsi; pilih yes untuk experimental app directory (sudah default di v14) dan yes untuk ESLint serta Prettier agar kode tetap rapi.

3. Struktur Direktori Baru

Setelah proses selesai, struktur utama akan terlihat seperti berikut:

my-next14-app/
├─ app/                # App Router (pages digantikan)
│   ├─ layout.tsx
│   ├─ page.tsx
│   └─ (optional) route groups
├─ components/        # Komponen UI reusable
├─ lib/               # Helper, API client, dll
├─ public/            # Static assets
├─ next.config.mjs    # Konfigurasi Next.js
├─ tsconfig.json      # TypeScript config
└─ package.json

4. Instalasi Dependency Tambahan

Untuk contoh real‑world, tambahkan beberapa paket populer:

pnpm add axios          # HTTP client
pnpm add @tanstack/react-query   # Data fetching & caching
pnpm add tailwindcss postcss autoprefixer -D
pnpm add @headlessui/react @heroicons/react
pnpm add classnames
pnpm add zustand          # State management ringan

Inisialisasi Tailwind CSS:

npx tailwindcss init -p

Sesuaikan tailwind.config.js dengan mode JIT dan path ke file app serta components:

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

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

Aktifkan fitur eksperimental serverActions dan imageOptimization yang baru di v14:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true,
    appDir: true,
  },
  images: {
    remotePatterns: [{ protocol: "https", hostname: "images.unsplash.com" }],
  },
};
export default nextConfig;

6. Membuat Layout Global

File app/layout.tsx menjadi kerangka HTML seluruh aplikasi. Tambahkan Tailwind CSS dan head meta tag SEO.

import "./globals.css";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Next.js 14 – App Router Demo",
  description: "Contoh proyek modern dengan Server Actions dan TypeScript",
};

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

7. Membuat Halaman Utama dengan Server Action

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari komponen client tanpa membuat API route terpisah.

Buat app/page.tsx berikut:

"use server";
import { revalidatePath } from "next/cache";
import axios from "axios";
import { useState, FormEvent } from "react";

// Server Action – dijalankan di server
async function addTodoAction(formData: FormData) {
  "use server";
  const title = formData.get("title") as string;
  await axios.post("https://jsonplaceholder.typicode.com/todos", {
    title,
    userId: 1,
    completed: false,
  });
  // Revalidate cache untuk path ini
  revalidatePath("/");
}

export default function HomePage() {
  const [title, setTitle] = useState("");

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const data = new FormData();
    data.append("title", title);
    await addTodoAction(data);
    setTitle("");
  };

  return (
    

      
Todo Demo dengan Server Action
      

         setTitle(e.target.value)}
          placeholder="Nama todo..."
          className="flex-1 p-2 border rounded"
          required
        />
        
      
    
  );
}

Perhatikan penggunaan "use server" di atas, yang menandakan fungsi addTodoAction hanya dapat dipanggil di server. Next.js secara otomatis meng‑generate endpoint internal.

8. Menggunakan React Query untuk Fetch Data

Buat file app/todos/page.tsx untuk menampilkan daftar todo yang di‑fetch dari API dan di‑cache oleh React Query.

"use client";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export default function TodosPage() {
  const { data, isLoading, error } = useQuery(["todos"], async () => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/todos?_limit=10");
    return res.data;
  });

  if (isLoading) return 
Loading...
;
  if (error) return 
Terjadi error.
;

  return (
    

      
Daftar Todo
      

        {data.map((todo: any) => (
          

            {todo.title}
          
        ))}
      
    
  );
}

Keterangan: "use client" menandakan seluruh file ini dijalankan di browser, sehingga React Query dapat bekerja secara interaktif.

9. Best Practice: Type Safety & Linting

• TypeScript strict mode: Pastikan tsconfig.json memiliki "strict": true untuk menghindari bug runtime.
• ESLint + Prettier: Pada proyek yang dibuat dengan create-next-app, rule sudah ter‑setup. Tambahkan rule @typescript-eslint/no-explicit-any untuk memaksa penggunaan tipe khusus.
• Environment variables: Simpan URL API pada .env.local dan akses via process.env.NEXT_PUBLIC_API_URL. Jangan pernah commit file .env ke repo.
• Caching: Gunakan revalidatePath atau revalidateTag setelah melakukan mutasi data pada Server Action, sehingga UI client otomatis ter‑refresh.
• Security: Hapus semua fungsi yang mengandung "use server" dari bundle client dengan menempatkannya dalam folder server/ atau menandai export const dynamic = "force-dynamic"; bila diperlukan.

10. Deploy ke Vercel (Opsional)

Next.js ter‑integrasi mulus dengan Vercel. Ikuti langkah berikut:

1. Buat repo Git (GitHub, GitLab, atau Bitbucket).
2. Push kode: git push origin main.
3. Login ke vercel.com dan impor repository.
4. Vercel otomatis mendeteksi next.config.mjs dan melakukan build dengan pnpm build.
5. Set environment variable NEXT_PUBLIC_API_URL pada dashboard Vercel.

Setelah selesai, aplikasi Anda tersedia dalam hitungan menit dengan CDN global.

11. Testing Ringkas dengan Jest & React Testing Library

Instal dependencies:

pnpm add -D jest @testing-library/react @testing-library/jest-dom @types/jest ts-jest

Konfigurasikan jest.config.ts:

import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "^@/(.*)$": "/$1",
  },
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
};
export default config;

Contoh tes untuk HomePage:

import { render, screen, fireEvent } from "@testing-library/react";
import HomePage from "@/app/page";

test("renders form and adds todo", async () => {
  render();
  const input = screen.getByPlaceholderText(/nama todo/i);
  fireEvent.change(input, { target: { value: "Belajar Next.js" } });
  fireEvent.click(screen.getByText(/tambah/i));
  // Karena Server Action dijalankan di server, kita hanya cek UI change
  expect(input).toHaveValue("");
});

12. Ringkasan Step-by-Step

1. Instal Node.js LTS & pnpm.
2. Jalankan pnpm create next-app@latest my-next14-app --ts --app.
3. Tambahkan dependency (axios, react-query, tailwind, dll).
4. Konfigurasi next.config.mjs untuk server actions.
5. Buat layout global di app/layout.tsx.
6. Implementasikan Server Action di app/page.tsx.
7. Gunakan React Query untuk fetching data di client component.
8. Ikuti best practice (type safety, linting, env vars, caching, security).
9. Deploy ke Vercel atau platform lain yang mendukung Node.js.
10. Tambahkan testing dengan Jest untuk memastikan stabilitas.

Dengan mengikuti tutorial ini Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, Server Actions, TypeScript, dan ekosistem modern seperti React Query serta Tailwind CSS. Struktur proyek sudah siap untuk skala produksi, lengkap dengan best practice, testing, dan pipeline deployment otomatis ke Vercel. Selamat membangun aplikasi React yang cepat, aman, dan mudah dipelihara!

---

Panduan lengkap langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, TypeScript, Tailwind, dan React Query. Termasuk konfigurasi, contoh kode, best practice, dan deployment ke Vercel.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding