Next.js 14 menjadi standar baru untuk aplikasi React yang server‑side rendered, dengan App Router, Server Actions, dan dukungan streaming. Tutorial ini membimbing Anda langkah demi langkah mulai dari instalasi, konfigurasi, contoh kode, hingga best practice untuk produksi.
1. Persiapan Lingkungan
Sebelum memulai, pastikan sistem Anda sudah terpasang:
- Node.js 20.10+ (LTS) – gunakan
nvmuntuk mengelola versi. - Git terbaru.
- Editor kode – VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense.
Install Node.js:
nvm install 20 && nvm use 202. Membuat Proyek Next.js 14 Baru
Gunakan create-next-app dengan flag --app untuk mengaktifkan App Router secara default.
npx create-next-app@latest my-next14-app --typescript --app
cd my-next14-appPeriksa versi:
npm list nextAnda akan melihat next@14.x.x.
3. Struktur Direktori Baru
App Router menggantikan pages dengan app folder. Struktur penting:
app/– layout, route.tsx, dan server actions.components/– UI reusable.lib/– helper, API client.styles/– Tailwind atau CSS modules.
4. Instalasi Dependensi Utama
# UI & styling
npm i tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
# State management (optional)
npm i zustand
# Validation & schema
npm i zod
# Testing
npm i -D jest @testing-library/react @testing-library/jest-dom
Konfigurasi Tailwind
Edit tailwind.config.js:
module.exports = {
content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
theme: { extend: {} },
plugins: [],
};Tambahkan direktif ke globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;5. Membuat Layout Global dengan Server Component
// app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Next.js 14 Demo',
description: 'Demo App Router & Server Actions',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
🚀 Next.js 14
{children}
);
}
6. Menambahkan Route dengan Server Actions
Server Actions memungkinkan Anda memanggil fungsi server langsung dari UI tanpa API terpisah.
// app/contact/page.tsx
"use server";
import { z } from 'zod';
import { redirect } from 'next/navigation';
const schema = z.object({
name: z.string().min(2),
email: z.string().email(),
message: z.string().min(10),
});
export async function submitContact(formData: FormData) {
const result = schema.safeParse(Object.fromEntries(formData));
if (!result.success) {
// throw will be caught by the client component
throw new Error('Validation failed');
}
// Simulasi penyimpanan ke DB (replace with Prisma/Firebase)
console.log('Contact saved', result.data);
redirect('/thank-you');
}
export default function ContactPage() {
return (
);
}
Penjelasan
- Baris
"use server"menandakan file ini dijalankan di server. - Fungsi
submitContactmenerimaFormDatasecara otomatis. - Validasi memakai
zod– jika gagal, error akan ditangkap oleh React Server Component dan dapat ditampilkan. redirectmengarahkan pengguna setelah berhasil.
7. Mengintegrasikan Prisma untuk Database (PostgreSQL)
# Install Prisma CLI
npm i -D prisma
npm i @prisma/client
# Inisialisasi
npx prisma init --datasource-provider postgresql
Update prisma/schema.prisma:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Contact {
id Int @id @default(autoincrement())
name String
email String @unique
message String
createdAt DateTime @default(now())
}
Run migration:
npx prisma migrate dev --name init
Gunakan di Server Action:
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function submitContact(formData: FormData) {
const data = Object.fromEntries(formData);
const result = schema.safeParse(data);
if (!result.success) throw new Error('Validation failed');
await prisma.contact.create({ data: result.data });
redirect('/thank-you');
}
8. Optimasi Performance – Streaming & Incremental Static Regeneration (ISR)
Next.js 14 mendukung streaming secara default pada Server Components. Untuk data yang berubah cepat, gunakan ISR:
// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { prisma } from '@/lib/prisma';
export const revalidate = 60; // revalidate setiap 60 detik
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await prisma.post.findUnique({ where: { slug: params.slug } });
if (!post) notFound();
return (
{post.title}
);
}
9. CI/CD dengan GitHub Actions + Vercel
Next.js 14 teroptimasi untuk Vercel, tetapi Anda dapat deploy ke platform lain (AWS, Cloudflare). Contoh workflow:
# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm ci
- run: npm run build
- name: Deploy
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
working-directory: .
github-token: ${{ secrets.GITHUB_TOKEN }}
10. Best Practice untuk Produksi
- TypeScript strict mode – aktifkan
strict: trueditsconfig.json. - Linting & Formatting – gunakan ESLint dengan
next/core-web-vitalspreset dan Prettier. - Security – set
Content‑Security‑Policydinext.config.js, aktifkanheaders()API. - Monitoring – integrasikan dengan Vercel Analytics atau Sentry (npm i @sentry/nextjs).
- Cache Control – gunakan
Cache‑Controlheader pada API routes untuk static assets.
11. Testing Unit & Integration
Contoh unit test untuk utility:
// lib/format.test.ts
import { formatDate } from './format';
test('formatDate returns ISO string', () => {
const date = new Date('2026-01-01T00:00:00Z');
expect(formatDate(date)).toBe('2026-01-01');
});
Run dengan:
npm test12. Deploy ke Production
Set environment variables di Vercel dashboard:
DATABASE_URL– PostgreSQL connection string.NEXT_PUBLIC_API_BASE– endpoint API eksternal (jika ada).
Push ke main, GitHub Action akan meng‑trigger build dan Vercel akan meluncurkan versi baru dalam hitungan menit.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki aplikasi Next.js 14 yang menggunakan App Router, Server Actions, Prisma, dan di‑deploy melalui CI/CD otomatis ke Vercel. Implementasi best practice seperti TypeScript strict, linting, keamanan header, serta monitoring memastikan aplikasi siap produksi dengan performa optimal dan skalabilitas tinggi.
Tutorial step-by-step setup Next.js 14 dengan App Router, Server Actions, Prisma, dan CI/CD Vercel. Panduan lengkap instalasi, konfigurasi, contoh kode, dan best practice untuk produksi.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar