Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini memberi langkah‑langkah detail mulai dari instalasi, konfigurasi, hingga contoh kode server actions dan best practice agar aplikasi Anda siap produksi di 2026.
1. Prasyarat dan Persiapan Lingkungan
Sebelum memulai, pastikan Anda memiliki:
- Node.js v20.10 atau lebih baru (unduh di nodejs.org)
- Git terinstal untuk version control
- Editor kode seperti VS Code dengan ekstensi ESLint dan Prettier
- Akun di Vercel (opsional, untuk deployment otomatis)
2. Instalasi Next.js 14
Buka terminal dan jalankan perintah berikut untuk membuat proyek baru dengan template app router yang sudah di‑enable:
npx create-next-app@latest my-next14-app --ts --experimental-app-dir
cd my-next14-app
Flag --ts menyiapkan TypeScript, sementara --experimental-app-dir memastikan struktur app/ dipakai (fitur stabil sejak Next.js 14).
3. Struktur Proyek dan Penjelasan File Penting
Setelah instalasi, struktur folder utama akan tampak seperti ini:
my-next14-app/
├─ app/
│ ├─ layout.tsx // Layout global
│ ├─ page.tsx // Halaman utama
│ └─ api/
│ └─ hello/route.ts // API route contoh
├─ public/
├─ styles/
├─ next.config.js
├─ tsconfig.json
└─ package.json
Folder app/ menggantikan pages/ tradisional. Semua file page.tsx menjadi route secara otomatis, dan layout.tsx menyediakan wrapper HTML yang konsisten.
4. Konfigurasi Next.js untuk Production‑Ready
Edit next.config.js untuk mengaktifkan fitur terbaru:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
serverActions: true, // enable server actions (stable in 14)
serverComponentsExternalPackages: [],
},
images: {
remotePatterns: [{
protocol: 'https',
hostname: '**.cdn.jsdelivr.net',
}],
},
};
export default nextConfig;
Pengaturan ini mengaktifkan Server Actions, menonaktifkan runtime JavaScript yang tidak diperlukan, dan mengoptimalkan gambar remote.
5. Membuat Server Action Pertama
Server Action memungkinkan Anda mengeksekusi kode di server langsung dari komponen React tanpa API route terpisah.
5.1. Buat folder actions di root
mkdir actions
cat > actions/addTodo.ts <<'EOF'
'use server';
import { prisma } from '@/lib/prisma';
export async function addTodo(formData: FormData) {
const title = formData.get('title') as string;
if (!title) throw new Error('Title is required');
await prisma.todo.create({ data: { title } });
// Revalidate halaman /todos setelah penambahan
revalidatePath('/todos');
}
EOF
5.2. Konsumsi di Komponen UI
/* app/todos/page.tsx */
import { addTodo } from '@/actions/addTodo';
export default async function TodosPage() {
const todos = await prisma.todo.findMany();
return (
Todo List
{todos.map(t => (- {t.title}
))}
);
}
Perhatikan:
'use server'menandai file hanya dapat dijalankan di server.- Fungsi
revalidatePathotomatis meng‑invalidate cache ISR untuk rute yang dimaksud.
6. Tambahkan Prisma ORM (Database Layer)
Next.js 14 bekerja mulus dengan Prisma. Ikuti langkah berikut:
# instal Prisma dan driver PostgreSQL (atau MySQL)
npm i -D prisma @prisma/client
npm i pg # contoh untuk PostgreSQL
# inisialisasi schema
npx prisma init --datasource-provider postgresql
Ubah prisma/schema.prisma:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Todo {
id Int @id @default(autoincrement())
title String
createdAt DateTime @default(now())
}
Jalankan migrasi:
npx prisma migrate dev --name init
Setelah itu, buat file helper lib/prisma.ts untuk meng‑instantiate client secara singleton, menghindari multiple connections pada serverless environment:
import { PrismaClient } from '@prisma/client';
let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient();
} else {
if (!(global as any).prisma) {
(global as any).prisma = new PrismaClient();
}
prisma = (global as any).prisma;
}
export { prisma };
7. Optimasi Performa dan Best Practice
- Incremental Static Regeneration (ISR): tambahkan
revalidatepadafetchuntuk halaman yang tidak terlalu dinamis.export const revalidate = 60; // rebuild tiap 60 detik - Image Optimization: gunakan
next/imagedengan loader default; pastikannext.config.jsmencakup domain gambar eksternal. - Security Headers: tambahkan middleware untuk CSP, X‑Frame‑Options, dll.
import { NextResponse } from 'next/server'; export function middleware(request) { const response = NextResponse.next(); response.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-eval'"); return response; } - Linting & Formatting: konfigurasi
eslint-config-nextdanprettieruntuk kode konsisten.
8. CI/CD dengan GitHub Actions dan Vercel
Buat file .github/workflows/deploy.yml:
name: Deploy to Vercel
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
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 }}
Setelah token Vercel disimpan di GitHub Secrets, setiap push ke main otomatis build & deploy.
9. Testing dan Debugging
- Unit Test dengan Jest & React Testing Library.
npm i -D jest @testing-library/react @testing-library/jest-dom ts-jest npx jest --init - End‑to‑End menggunakan Playwright.
npm i -D @playwright/test npx playwright install - Debugging: jalankan
next devdengan--inspectuntuk attach debugger di VS Code.
10. Deployment ke Production
Jika menggunakan Vercel, cukup push ke main. Alternatifnya, deploy ke Docker & Kubernetes:
# Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json .
RUN npm ci
COPY . .
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY package*.json .
RUN npm ci --omit=dev
EXPOSE 3000
CMD ["node", "server.js"]
Bangun image, push ke registry, lalu gunakan manifest Kubernetes standar (Deployment + Service + Ingress). Pastikan envFrom meng‑inject DATABASE_URL dan NEXT_PUBLIC_* variables.
11. Monitoring dan Logging
Integrasikan dengan Vercel Analytics atau gunakan OpenTelemetry SDK untuk mengirim trace ke Grafana Tempo. Contoh:
npm i @opentelemetry/api @opentelemetry/sdk-node
// otel.js
import { NodeTracerProvider } from '@opentelemetry/sdk-node';
const provider = new NodeTracerProvider();
provider.register();
Import modul ini di next.config.js atau entry point untuk meng‑capture request latency.
12. Ringkasan Langkah
- Instal Node.js v20+ dan buat proyek Next.js 14 dengan
approuter. - Konfigurasi
next.config.jsuntuk server actions & image optimization. - Integrasikan Prisma sebagai ORM, jalankan migrasi.
- Buat server action
addTododan konsumsi di UI. - Implementasikan ISR, security headers, dan linting.
- Siapkan CI/CD GitHub Actions + Vercel (atau Docker/K8s).
- Tambahkan testing dengan Jest & Playwright, serta debugging.
- Deploy, monitor, dan iterasi berdasarkan feedback.
Dengan mengikuti tutorial ini, Anda memiliki basis aplikasi Next.js 14 yang modern, scalable, dan siap produksi pada ekosistem 2026.
Next.js 14 menyatukan kekuatan React server components, server actions, dan file‑based routing dalam satu paket yang mudah dipelihara. Dengan Prisma sebagai ORM, CI/CD terautomasi lewat GitHub Actions, serta best practice keamanan dan performance, Anda dapat mempercepat delivery fitur tanpa mengorbankan kualitas. Mulailah proyek Anda hari ini, terus iterasi, dan manfaatkan ekosistem Vercel atau Kubernetes untuk skalabilitas global.
Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, Prisma, CI/CD, dan best practice untuk produksi 2026. Tutorial step‑by‑step untuk developer web modern.
Programming,Software Engineering,Web Development,Next.js,React,Server Actions,Prisma,CI/CD
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar