Next.js 14 telah menjadi standar de‑facto untuk React full‑stack. Tutorial ini mengajarkan cara menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice security dan performance untuk produksi.
1. Persiapan Lingkungan
Pastikan Anda memiliki Node.js versi 20.12 atau lebih tinggi dan npm atau pnpm terbaru. Versi LTS ini sudah teruji dengan Next.js 14.
node -v
# v20.12.0
npm -v
# 10.5.01.1 Instalasi Global Tools
- Install
create-next-appsecara global (opsional, karena dapat dipanggil via npx). - Install
turbountuk monorepo bila diperlukan.
npm i -g create-next-app turbo2. Membuat Proyek Baru dengan App Router
Next.js 14 memperkenalkan App Router sebagai default. Gunakan perintah berikut untuk memulai project dengan TypeScript dan ESLint:
npx create-next-app@latest my-next14-app \
--ts \
--eslint \
--use-npm
cd my-next14-appFolder app akan otomatis dibuat. Struktur dasar:
/app
/layout.tsx
/page.tsx
/api
/hello
route.ts2.1 Menjalankan Development Server
npm run dev
# http://localhost:30003. Konfigurasi Dasar Next.js 14
Ubah next.config.js untuk mengaktifkan React Server Components, Image Optimization, dan experimental feature: serverActions:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
serverActions: true,
appDir: true
},
images: {
remotePatterns: [{
protocol: 'https',
hostname: '**.cdn.jsdelivr.net',
pathname: '/**'
}]
}
};
export default nextConfig;3.1 Environment Variables
Buat file .env.local untuk variabel rahasia (mis. API key). Pastikan menambahkan file ini ke .gitignore:
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_TOKEN=super-secret4. Membuat Route dengan Server Action
Server Actions memungkinkan fungsi async dijalankan di server tanpa API route terpisah.
4.1 Definisikan Action di app/contact/page.tsx
"use server";
import { redirect } from 'next/navigation';
export async function sendMessage(formData: FormData) {
const name = formData.get('name');
const email = formData.get('email');
const message = formData.get('message');
// Simulasi panggilan API internal
await fetch(process.env.NEXT_PUBLIC_API_URL + '/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email, message })
});
// Setelah berhasil, redirect ke halaman thanks
redirect('/thanks');
}
export default function ContactPage() {
return (
);
}
Catatan: Karena "use server", fungsi ini tidak dieksekusi di browser, sehingga kredensial aman.
5. Optimasi Gambar dengan next/image
Next.js 14 mendukung next/future/image yang lebih ringan. Contoh penggunaan:
import Image from 'next/future/image';
export function Hero() {
return (
);
}
6. Implementasi Incremental Static Regeneration (ISR)
Untuk konten yang jarang berubah, gunakan ISR agar halaman tetap statis namun ter‑refresh secara periodik.
export const revalidate = 3600; // 1 jam
export default async function BlogPost({ params }) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts/${params.slug}`);
const post = await res.json();
return (
{post.title}
);
}
7. Deployment ke Vercel & Cloudflare Pages
Next.js 14 ter‑optimasi untuk Vercel, tetapi konfigurasi serupa dapat dipakai di Cloudflare.
7.1 Deploy ke Vercel
- Push repository ke GitHub.
- Buka Vercel Dashboard, pilih New Project, sambungkan repo.
- Set environment variables di Settings → Environment Variables.
- Vercel otomatis menjalankan
npm run builddannpm start.
7.2 Deploy ke Cloudflare Pages
- Di Cloudflare Dashboard, buat Pages Project dan hubungkan repo.
- Build command:
npm run build - Build output directory:
.vercel/output/static(gunakan adaptor@cloudflare/next-on-pagesjika diperlukan).
8. Best Practice Keamanan & Performance
- Content Security Policy (CSP): tambah header di
next.config.jsatau lewat middleware.export async function middleware(request) { const response = NextResponse.next(); response.headers.set('Content-Security-Policy', "default-src 'self'; img-src https: data:; script-src 'self' 'unsafe-inline'"); return response; } - Rate Limiting pada API Routes dengan
lru-cacheataucloudflare workers. - Lazy Loading komponen dengan
dynamic()darinext/dynamic. - Bundle Analyzer: tambahkan
next-bundle-analyzeruntuk mengidentifikasi modul berukuran besar. - Static Assets Caching: gunakan
Cache-Control: public, max-age=31536000, immutablepada folderpublic.
9. Testing & CI/CD
Integrasikan Jest + React Testing Library serta Playwright untuk end‑to‑end.
# instal dev dependencies
npm i -D jest @testing-library/react @testing-library/jest-dom playwright
# contoh test unit
// __tests__/Hero.test.tsx
import { render, screen } from '@testing-library/react';
import Hero from '@/app/Hero';
test('renders hero image', () => {
render(Tambahkan script CI di .github/workflows/ci.yml untuk menjalankan lint, test, dan build sebelum merge.
10. Monitoring Produksi
Gunakan Vercel Analytics atau integrasi OpenTelemetry dengan @opentelemetry/api untuk tracing request latency dan error rate.
import { trace } from '@opentelemetry/api';
const tracer = trace.getTracer('next-app');
export async function GET(request) {
return tracer.startActiveSpan('api-get', async span => {
const data = await fetch('https://api.example.com/data');
span.end();
return new Response(await data.json());
});
}
Dengan langkah‑langkah di atas, Anda memiliki aplikasi Next.js 14 yang modern, aman, dan siap skala.
Next.js 14 menyederhanakan pengembangan full‑stack React dengan App Router, Server Actions, dan ISR. Mengikuti tutorial ini—mulai dari instalasi, konfigurasi, menulis kode contoh, hingga deployment dan monitoring—akan memberikan fondasi kuat untuk membangun aplikasi Web Development modern yang performant dan secure. Terapkan best practice keamanan, caching, dan CI/CD untuk menjaga kualitas kode seiring pertumbuhan tim dan traffic.
Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, ISR, dan best practice security serta performance untuk produksi di 2026.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar