Next.js 14 menjadi standar de facto untuk pengembangan aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk performa dan keamanan.
1. Prasyarat & Lingkungan Pengembangan
Pastikan Anda memiliki:
- Node.js v20.10 atau lebih baru (
node -v) - npm v10 atau Yarn v4
- Git untuk version control
- Editor kode (VS Code direkomendasikan dengan ekstensi
ESLint&Prettier)
1.1. Verifikasi Instalasi
node -v
npm -v
Jika versi tidak sesuai, unduh Node.js terbaru.
2. Membuat Project Next.js 14 Baru
2.1. Inisialisasi dengan create‑next‑app
npx create-next-app@latest my-next14-app --ts --eslint --src-dir --app
cd my-next14-app
Opsi --app secara otomatis mengaktifkan App Router, yang menjadi fondasi Next.js 14.
2.2. Struktur Direktori
Setelah perintah selesai, struktur src/app akan muncul:
src/
app/
layout.tsx
page.tsx
globals.css
components/
lib/
Folder app menggantikan pages dan mendukung file‑based routing, streaming, dan Server Actions.
3. Konfigurasi Dasar
3.1. TypeScript & ESLint
File tsconfig.json sudah ter‑generate. Tambahkan aturan khusus:
{
"extends": "next/core-web-vitals",
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"baseUrl": "./src"
}
}
3.2. Pengaturan Environment
Buat file .env.local di root:
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXXXX
Gunakan process.env.NEXT_PUBLIC_* di kode React tanpa takut terekspos pada server.
4. Implementasi Server Actions (Next.js 14)
4.1. Apa Itu Server Action?
Server Action memungkinkan Anda mengeksekusi fungsi di server langsung dari komponen React tanpa menulis API route terpisah. Ini meningkatkan keamanan karena logika tetap di server.
4.2. Membuat Action untuk Menyimpan Data
Tambahkan file src/app/contact/page.tsx:
import React from "react";
export default function ContactPage() {
async function handleSubmit(formData: FormData) {
"use server"; // menandakan eksekusi di server
const name = formData.get("name") as string;
const email = formData.get("email") as string;
const message = formData.get("message") as string;
// contoh panggilan ke API internal
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/contact`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, email, message })
});
if (!res.ok) throw new Error("Failed to submit");
revalidatePath("/contact/success"); // optional, invalidate cache
}
return (
Contact Us
);
}
Catatan:
- Keyword
"use server"menandakan fungsi hanya dapat dijalankan di sisi server. - Form menggunakan attribute
action={handleSubmit}sehingga Next.js otomatis meng‑serializeFormDatadan meng‑invoke action via RSC. - Gunakan
revalidatePath(Next 14) untuk meng‑invalidate cache setelah data berubah.
4.3. Menangani Error di UI
Wrap komponen dengan useActionState untuk memunculkan pesan error tanpa reload full:
import { useActionState } from "react";
export default function ContactPage() {
const [state, formAction] = useActionState(handleSubmit, { error: null });
return (
);
}
5. Optimasi Performansi dengan Streaming & Edge Runtime
5.1. Aktifkan Edge Runtime
Di next.config.js, tambahkan:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { runtime: "edge" },
reactStrictMode: true,
swcMinify: true,
};
module.exports = nextConfig;
Edge Runtime mengeksekusi sebagian besar route di Vercel Edge atau Cloudflare Workers, mengurangi latency.
5.2. Streaming UI dengan Suspense
Contoh menampilkan data produk secara streaming:
import { Suspense } from "react";
import ProductList from "@/components/ProductList";
export default function Home() {
return (
Shop
Loading products…}>
);
}
6. Deployment ke Vercel (atau Netlify/Render)
6.1. Persiapan Repo Git
git init
git add .
git commit -m "Initial commit - Next.js 14 setup"
git branch -M main
git remote add origin git@github.com:username/my-next14-app.git
git push -u origin main
6.2. Deploy via Vercel CLI
npm i -g vercel
vercel login
vercel link # pilih proyek yang baru dibuat di dashboard Vercel
vercel --prod
Vercel otomatis mendeteksi next.config.js dan mengaktifkan Edge Runtime serta Incremental Static Regeneration (ISR).
7. Best Practice untuk Production
- Security: Selalu gunakan
"use server"untuk logic yang mengakses DB atau API kunci; hindari menaruh secret di client. - Performance: Manfaatkan
next/fontuntuk font optimal, danimagecomponent untuk lazy‑load. - Testing: Gunakan Jest + React Testing Library untuk unit test, dan Playwright untuk e2e.
npm i -D jest @testing-library/react @testing-library/jest-dom playwright - Monitoring: Integrasikan Vercel Analytics atau Sentry (npm i @sentry/nextjs) untuk error tracking.
- Code Quality: Aktifkan
eslint-config-nextdan Prettier di CI.
8. CI/CD dengan GitHub Actions
Simpan file .github/workflows/ci.yml:
name: CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20.x
- run: npm ci
- run: npm run lint
- run: npm run test
- run: npm run build
Workflow ini memastikan setiap commit tervalidasi sebelum masuk ke production.
Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang menggunakan App Router, Server Actions, dan Edge Runtime—semua dalam satu basis kode modern. Terapkan best practice keamanan, testing, dan CI/CD untuk memastikan aplikasi skalabel, cepat, dan siap produksi di tahun 2026.
Tutorial lengkap step-by-step setup Next.js 14 dengan App Router, Server Actions, Edge Runtime, CI/CD, dan best practice untuk performa tinggi di 2026.
Programming,Software Engineering,Web Development,Next.js,React,Server Actions,Edge Runtime
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar