Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini memandu Anda langkah demi langkah menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 dengan fitur App Router, Server Actions, dan Edge Runtime, lengkap dengan contoh kode dan best practice terkini.
1. Prasyarat dan Persiapan Lingkungan
Pastikan Anda memiliki:
- Node.js versi 20.10 atau lebih baru (download di nodejs.org)
- npm 10+ atau yarn 4+
- Git untuk version control
- Editor kode favorit (VS Code sangat direkomendasikan)
- Akun Vercel (untuk deployment Edge) atau platform lain yang mendukung Edge Functions
2. Membuat Proyek Next.js 14 Baru
Jalankan perintah berikut di terminal:
npx create-next-app@latest my-next14-app --experimental-app-router --tsParameter --experimental-app-router mengaktifkan App Router secara default, dan --ts menyiapkan TypeScript.
Setelah selesai, masuk ke folder proyek:
cd my-next14-app3. Menstrukturkan Direktori dengan App Router
Next.js 14 memanfaatkan folder app sebagai root routing. Ubah struktur dasar menjadi:
app/
├─ layout.tsx # Layout global
├─ page.tsx # Halaman utama
├─ dashboard/
│ ├─ layout.tsx # Layout dashboard
│ └─ page.tsx # Halaman dashboard
└─ api/
└─ hello/route.ts # API Route (Edge)
Contoh app/layout.tsx:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className="bg-gray-50 min-h-screen">{children}</body>
</html>
);
}4. Mengaktifkan Edge Runtime
Tambahkan file next.config.js berikut:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
serverActions: true,
},
// Semua route di folder /api secara default dijalankan di Edge
output: 'standalone',
};
module.exports = nextConfig;Untuk memastikan sebuah API route berjalan di Edge, gunakan ekspor runtime:
export const runtime = 'edge';
export async function GET() {
return new Response(JSON.stringify({ message: 'Hello from Edge!' }), { status: 200 });
}5. Membuat Server Action (Stateful Function) di App Router
Server Actions memungkinkan Anda menjalankan kode server langsung dari komponen React tanpa menulis API route terpisah.
// app/dashboard/page.tsx
'use server';
import { redirect } from 'next/navigation';
export async function createPost(formData: FormData) {
// Contoh validasi sederhana
const title = formData.get('title')?.toString().trim();
if (!title) throw new Error('Title is required');
// Simulasi penyimpanan ke DB (misalnya PlanetScale atau Supabase)
await fetch(process.env.DATABASE_API, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title }),
});
redirect('/dashboard');
}
export default function Dashboard() {
return (
<section className="p-6">
<h1 className="text-2xl mb-4">Buat Post Baru</h1>
<form action={createPost}>
<input name="title" placeholder="Judul post" className="border p-2 mr-2" />
<button type="submit" className="bg-blue-600 text-white px-4 py-2">Simpan</button>
</form>
</section>
);
}
Catatan: Server Action hanya dapat dipanggil dari komponen yang berada di dalam app directory.
6. Menambahkan Styling dengan Tailwind CSS 3.4
Instal Tailwind:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -pUpdate tailwind.config.ts:
export default {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: { extend: {} },
plugins: [],
};Tambahkan direktif ke globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;7. Optimasi Performansi – Incremental Static Regeneration (ISR)
Untuk halaman yang sebagian statis, gunakan revalidate di file page.tsx:
export const revalidate = 60; // tiap 60 detik
export default async function Home() {
const posts = await fetch(`${process.env.API_URL}/posts`).then(res => res.json());
return (
<ul>
{posts.map(p => (
<li key={p.id}>{p.title}</li>
))}
</ul>
);
}
Dengan ISR, konten akan di‑cache di CDN dan hanya di‑refresh setiap interval yang ditentukan.
8. Deployment ke Vercel (Edge Ready)
- Push repository ke GitHub.
- Buka Vercel dashboard dan pilih repository.
- Pilih Framework Preset → Next.js, pastikan
Output: Edge Functionstercentang. - Set environment variables (misal
DATABASE_API,API_URL). - Deploy. Vercel otomatis meng‑build dengan Edge runtime.
Setelah selesai, Anda dapat mengecek header x-vercel-cache untuk memastikan ISR berfungsi.
9. Best Practice untuk Proyek Next.js 14
- Gunakan TypeScript secara konsisten – mengurangi bug di runtime.
- Pisahkan kode server dan client dengan
'use client'hanya pada komponen yang membutuhkan interaktivitas. - Manfaatkan Edge Middleware untuk autentikasi dan routing berbasis lokasi.
- Cache data secara eksplisit menggunakan
next/cacheatau SWR untuk fetch client‑side. - Audit bundle size dengan
next build --profiledan hapus dependensi yang tidak terpakai.
10. Troubleshooting Umum
| Masalah | Penyebab | Solusi |
|---|---|---|
| "Server Actions only work in the app dir" | File berada di folder pages | Pindahkan ke app atau gunakan API route tradisional. |
| Edge runtime tidak merespon | Penggunaan modul Node.js yang tidak didukung di Edge | Ganti dengan versi yang kompatibel atau gunakan serverless function biasa. |
| Cache tidak ter‑refresh pada ISR | Revalidate tidak di‑export atau nilai 0 | Pastikan export const revalidate = X; ada di file page. |
Dengan mengikuti tutorial ini, Anda memiliki basis proyek Next.js 14 yang modern, cepat, dan siap di‑scale pada infrastruktur Edge.
Next.js 14 memperkenalkan paradigma baru dengan App Router, Server Actions, dan Edge Runtime yang memudahkan pengembangan full‑stack React yang high‑performance. Dengan langkah‑langkah di atas—mulai dari instalasi, struktur proyek, konfigurasi Edge, hingga deployment di Vercel—Anda dapat membangun aplikasi web yang scalable, secure, dan mudah dipelihara. Terapkan best practice seperti TypeScript, pemisahan client/server, serta ISR untuk hasil optimal dalam dunia Programming, Software Engineering, dan Web Development modern.
Tutorial lengkap langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, dan Edge Runtime di 2026. Termasuk instalasi, konfigurasi, contoh kode, best practice, dan deployment ke Vercel.
Programming,Software Engineering,Web Development,Next.js 14,App Router,Edge Runtime,Server Actions
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar