Next.js 14 menjadi standar baru bagi pengembangan web full‑stack dengan fitur App Router dan Server Actions. Tutorial ini membimbing Anda langkah demi langkah menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk proyek yang siap produksi.
1. Prasyarat dan Persiapan Lingkungan
Pastikan Anda memiliki:
- Node.js v20.12 atau lebih baru (download di sini)
- npm v10 atau yarn v4
- Git untuk version control
- IDE modern (VS Code direkomendasikan) dengan ekstensi
ESLint,Prettier, danTailwind CSS IntelliSense
2. Membuat Proyek Next.js 14 Baru
# Buat folder proyek
mkdir next14‑approuter-demo && cd $_
# Inisialisasi dengan create‑next‑app
npx create-next-app@latest . \
--ts \
--app \
--eslint \
--tailwind
# Instal dependensi tambahan
npm install @headlessui/react @heroicons/react
Flag --app otomatis mengaktifkan App Router, --ts menyiapkan TypeScript, dan --tailwind menambahkan Tailwind CSS.
3. Struktur Direktori Baru
Next.js 14 menggunakan konvensi folder app/ sebagai root. Berikut struktur penting:
app/
├─ layout.tsx # Layout global
├─ page.tsx # Halaman beranda
├─ (auth)/
│ ├─ login/
│ │ └─ page.tsx
│ └─ register/
│ └─ page.tsx
├─ dashboard/
│ ├─ layout.tsx # Layout khusus dashboard
│ └─ page.tsx
└─ api/
└─ actions/
└─ todo.ts # Contoh Server Action
4. Konfigurasi TypeScript dan ESLint
Next.js sudah men-generate tsconfig.json dan .eslintrc.json. Tambahkan aturan yang disarankan oleh typescript‑eslint serta Prettier untuk konsistensi kode:
# Install paket tambahan
npm i -D eslint-config-prettier eslint-plugin-prettier prettier
# .eslintrc.json (potongan penting)
{
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error",
"@typescript-eslint/no-unused-vars": "warn"
}
}
5. Membuat Layout Global dengan Tailwind
// app/layout.tsx
import '@/styles/globals.css';
import type { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
Next.js 14 Demo
{children}
);
}
Layout ini menyiapkan header, footer, dan kontainer responsif. Tailwind memberikan utility‑class yang sangat cepat untuk styling.
6. Implementasi Server Action – Todo API
Server Actions memungkinkan fungsi async dijalankan di server tanpa menulis API route terpisah. Contoh sederhana CRUD Todo:
// app/api/actions/todo.ts
'use server';
import { revalidatePath } from 'next/cache';
import { v4 as uuidv4 } from 'uuid';
type Todo = {
id: string;
title: string;
completed: boolean;
};
let todos: Todo[] = [];
export async function addTodo(title: string) {
const newTodo: Todo = { id: uuidv4(), title, completed: false };
todos.push(newTodo);
revalidatePath('/dashboard'); // Refresh data pada halaman dashboard
return newTodo;
}
export async function toggleTodo(id: string) {
const todo = todos.find(t => t.id === id);
if (todo) todo.completed = !todo.completed;
revalidatePath('/dashboard');
return todo;
}
export async function getTodos() {
return todos;
}
Catatan:
- Gunakan
'use server'di atas file untuk menandai fungsi dijalankan di server. revalidatePathadalah mekanisme ISR (Incremental Static Regeneration) yang secara otomatis memperbarui cache halaman.
7. Membuat Halaman Dashboard yang Memanggil Server Action
// app/dashboard/page.tsx
import { addTodo, toggleTodo, getTodos } from '@/app/api/actions/todo';
import { useState, useEffect } from 'react';
export default function Dashboard() {
const [todos, setTodos] = useState>([]);
const [newTitle, setNewTitle] = useState('');
// Load todos (client‑side fetch karena data berada di memory server)
useEffect(() => {
(async () => {
const data = await getTodos();
setTodos(data);
})();
}, []);
const handleAdd = async () => {
if (!newTitle.trim()) return;
const created = await addTodo(newTitle);
setTodos(prev => [...prev, created]);
setNewTitle('');
};
const handleToggle = async (id: string) => {
const updated = await toggleTodo(id);
setTodos(prev => prev.map(t => (t.id === id ? updated! : t)));
};
return (
Dashboard Todo
setNewTitle(e.target.value)}
className="border rounded px-2 py-1 flex-1"
placeholder="Tambah todo baru..."
/>
{todos.map(todo => (
-
{todo.title}
))}
);
}
Langkah ini memperlihatkan cara menggabungkan Server Actions dengan React state pada client, menciptakan UI yang responsif tanpa menulis API route terpisah.
8. Penggunaan Middleware untuk Autentikasi
Next.js 14 mendukung middleware di folder middleware.ts. Berikut contoh simpel yang melindungi route /dashboard menggunakan JWT yang disimpan di cookie:
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';
export async function middleware(req: NextRequest) {
const token = req.cookies.get('auth');
if (req.nextUrl.pathname.startsWith('/dashboard')) {
if (!token) return NextResponse.redirect(new URL('/(auth)/login', req.url));
try {
jwt.verify(token.value, process.env.JWT_SECRET!);
} catch {
return NextResponse.redirect(new URL('/(auth)/login', req.url));
}
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*'],
};
Best practice: simpan JWT_SECRET di .env.local dan jangan pernah commit file tersebut.
9. Deploy ke Vercel dengan Incremental Static Regeneration
- Push repository ke GitHub.
- Buka Vercel dashboard dan pilih repo.
- Vercel otomatis mendeteksi
next.config.js. Pastikan variabel env (JWT_SECRET) ditambahkan pada Settings > Environment Variables. - Deploy selesai, aplikasinya tersedia dalam hitungan menit dengan CDN edge.
Dengan revalidatePath pada Server Actions, halaman /dashboard akan di‑re‑generate secara otomatis setiap kali data berubah, tanpa menunggu build ulang.
10. Best Practice untuk Proyek Next.js 14
- Gunakan TypeScript strict mode – menambah keamanan tipe.
- Aktifkan React Server Components (RSC) hanya bila dibutuhkan – mengurangi ukuran bundle client.
- Segregasikan kode UI (components) dan logic (actions) dalam folder terpisah untuk kemudahan testing.
- Linting + Prettier CI – tambahkan script
"lint": "next lint && prettier --check ."ke pipeline GitHub Actions. - Monitor performance dengan Next.js Analytics – aktifkan di
next.config.jsdengananalytics: { enabled: true }.
11. Debugging dan Monitoring
Next.js 14 menambahkan next dev --inspect yang membuka debugger Chrome. Untuk error runtime, gunakan next-warn extension dan react‑devtools pada browser.
12. Optimasi Produksi
- Aktifkan
experimental: { typedRoutes: true }untuk mempercepat route matching. - Gunakan
next/fontuntuk meng‑load font secara otomatis. - Compress gambar dengan
next/imagedan setloader: 'custom'bila memakai CDN khusus.
13. Ringkasan Langkah
- Instal Node.js, buat proyek dengan
create-next-app --app --ts --tailwind. - Atur ESLint + Prettier.
- Buat layout global dan styling Tailwind.
- Implementasikan Server Actions untuk CRUD.
- Bangun UI dashboard yang memanggil actions.
- Tambahkan middleware JWT untuk keamanan.
- Deploy ke Vercel, konfigurasi env, dan verifikasi ISR.
- Ikuti best practice linting, type‑safety, dan monitoring.
Next.js 14 memadukan kekuatan full‑stack React dengan kemudahan konfigurasi melalui App Router dan Server Actions. Dengan mengikuti tutorial ini Anda akan memiliki aplikasi web modern yang scalable, aman, dan siap produksi dalam hitungan menit. Terapkan best practice yang dibahas, integrasikan CI/CD, serta pantau performa lewat Vercel Analytics untuk menjaga kualitas kode seiring pertumbuhan fitur.
Panduan lengkap step‑by‑step setup Next.js 14 dengan App Router, Server Actions, TypeScript, dan best practice produksi pada 2026. Termasuk contoh kode, middleware JWT, dan deployment Vercel.
Programming,Software Engineering,Web Development,Next.js 14,App Router,Server Actions,TypeScript,Tailwind CSS,Vercel
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar