Next.js 14 menjadi standar de‑facto untuk pembangunan aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah dari instalasi hingga deploy, lengkap dengan contoh kode, konfigurasi, dan best practice untuk meningkatkan performa serta keamanan.
1. Prasyarat
Sebelum memulai, pastikan Anda telah menginstall:
- Node.js v20.x atau lebih baru (download di nodejs.org)
- npm v10.x atau Yarn v4 (pilih salah satu)
- Git untuk version control
- Editor kode seperti VS Code
2. Membuat Proyek Next.js 14 Baru
npx create-next-app@latest my-next14-app --ts --experimental-app
cd my-next14-app
Flag --experimental-app mengaktifkan App Router yang menjadi default pada Next.js 14. Opsi --ts menyiapkan TypeScript secara otomatis.
3. Struktur Direktori Penting
app/– tempat semua route berbasis folder (App Router)components/– UI reusablelib/– helper functions, API client, dllpublic/– aset statis
Next.js 14 menghilangkan pages/ secara default, jadi pastikan Anda menempatkan semua halaman di dalam app/.
4. Instalasi Dependensi Tambahan
# UI library (Tailwind CSS)
npx tailwindcss init -p
# Headless UI untuk komponen aksesibel
npm i @headlessui/react
# Tanstack Query untuk data fetching
npm i @tanstack/react-query
# Prisma sebagai ORM (opsional)
npm i prisma @prisma/client
# dotenv untuk environment variable
npm i dotenv
Jangan lupa menambahkan tailwind.config.js dan mengimport Tailwind di app/globals.css.
5. Konfigurasi Environment
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
Gunakan dotenv di next.config.mjs untuk memuat variabel:
import { config } from 'dotenv';
config();
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: { appDir: true },
images: { remotePatterns: [{ hostname: 'images.example.com' }] },
};
export default nextConfig;
6. Membuat Route dengan Server Actions
Server Actions memungkinkan menjalankan kode server langsung dari komponen React tanpa API route terpisah.
// app/contact/page.tsx
'use client';
import { useState, FormEvent } from 'react';
export default function ContactPage() {
const [status, setStatus] = useState('idle');
async function sendMessage(formData: FormData) {
'use server';
// kode server: simpan ke DB atau kirim email
const message = formData.get('message');
// contoh: menyimpan lewat Prisma
await prisma.contact.create({ data: { message: String(message) } });
return 'success';
}
async function handleSubmit(e: FormEvent) {
e.preventDefault();
setStatus('loading');
const formData = new FormData(e.currentTarget);
const result = await sendMessage(formData);
setStatus(result === 'success' ? 'sent' : 'error');
}
return (
);
}
Catatan: 'use server' menandai fungsi sebagai server‑only. Pastikan file berada di dalam app/ sehingga build dapat mengoptimalkannya.
7. Optimasi dengan Turbopack
Next.js 14 menggunakan Turbopack sebagai bundler default. Tidak ada konfigurasi tambahan, namun Anda dapat menyesuaikan cache dan fallback:
// next.config.mjs (lanjutan)
const nextConfig = {
...,
experimental: {
appDir: true,
turbo: {
// Mengaktifkan persistent disk cache di CI/CD
persistentCache: true,
},
},
};
Di lingkungan CI/CD, set TURBO_FORCE_REBUILD=1 hanya saat perubahan major untuk mempercepat pipeline.
8. Menambahkan Tanstack Query untuk Client‑Side Data Fetching
// lib/queryClient.ts
import { QueryClient } from '@tanstack/react-query';
export const queryClient = new QueryClient();
// app/layout.tsx
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '@/lib/queryClient';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
Gunakan useQuery di komponen untuk fetch data dengan caching otomatis.
9. Deploy ke Vercel atau Netlify
- Push repo ke GitHub.
- Buka dashboard Vercel, pilih New Project, sambungkan repo.
- Vercel otomatis mendeteksi
next.config.mjsdan mengaktifkanEdge Functionsuntuk Server Actions. - Set environment variables di Settings → Environment Variables.
- Deploy! Vercel akan menghasilkan preview URL setiap commit.
Jika memakai Netlify, aktifkan Next.js Build Plugin versi terbaru yang mendukung App Router.
10. Best Practice untuk Production
- Static Generation (SSG) bila memungkinkan – gunakan
generateStaticParamsdi route dinamis untuk pre‑render. - Security Headers – tambahkan di
next.config.mjs:headers: async () => [{ source: '/(.*)', headers: [ { key: 'X‑Content‑Type‑Options', value: 'nosniff' }, { key: 'Referrer‑Policy', value: 'strict-origin-when-cross-origin' }, { key: 'Content‑Security‑Policy', value: "default-src 'self'; img-src https: data:; script-src 'self' 'unsafe-inline'" }, ], }], - Image Optimization – gunakan
next/imagedengan remotePatterns atau host custom. - Performance Monitoring – integrasikan dengan Vercel Analytics atau Web Vitals di
app/layout.tsx. - Linting & Formatting – tambahkan ESLint + Prettier preset
nextdan jalankan pre‑commit hook denganhusky.
11. Debugging Tips
- Gunakan
next devdengan--inspectuntuk attach debugger. - Server Actions dapat dipanggil langsung di console dengan
await sendMessage(new FormData())di DevTools. - Periksa log Edge Function di Vercel Dashboard > Functions > Logs.
12. Skalabilitas dengan Incremental Static Regeneration (ISR)
// app/blog/[slug]/page.tsx
export const revalidate = 60; // halaman akan refresh tiap 60 detik
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts/${params.slug}`).then(r => r.json());
return ({/* render post */} );
}
ISR memberikan keseimbangan antara SSG dan server‑side rendering, cocok untuk konten blog atau katalog produk.
13. Menggunakan Middleware untuk Auth
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export async function middleware(request: NextRequest) {
const token = request.cookies.get('auth');
if (!token) return NextResponse.redirect(new URL('/login', request.url));
// optional: verify JWT
return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*', '/profile/:path*'] };
Middleware berjalan di edge runtime, jadi sangat cepat untuk otorisasi.
14. Testing dengan Jest & React Testing Library
# Instalasi
npm i -D jest @testing-library/react @testing-library/jest-dom ts-jest
# jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
moduleNameMapper: { '^@/(.*)
Next.js 14 menyatukan kekuatan App Router, Server Actions, dan Turbopack menjadi satu stack yang memudahkan developer membangun aplikasi React full‑stack dengan performa tinggi. Ikuti langkah‑langkah di atas, terapkan best practice, dan manfaatkan integrasi CI/CD modern untuk memastikan kode Anda tetap aman, scalable, dan mudah dipelihara. Selamat coding!
Tutorial step‑by‑step setup Next.js 14 dengan App Router, Server Actions, dan Turbopack. Panduan instalasi, konfigurasi, contoh kode, dan best practice untuk Performance, Security, dan Deployment di 2026.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
: '/$1' },
};
Contoh test komponen:
// __tests__/ContactForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import ContactPage from '@/app/contact/page';
test('renders form and submits', async () => {
render(15. Ringkasan Langkah
- Install Node.js & create project dengan
create-next-app. - Setup Tailwind, Tanstack Query, Prisma (opsional) dan environment variable.
- Buat route dengan App Router, manfaatkan Server Actions untuk operasi backend.
- Optimalkan build menggunakan Turbopack default.
- Deploy ke Vercel/Netlify, set security headers, dan aktifkan monitoring.
- Implementasikan best practice: ISR, middleware auth, testing.
Dengan mengikuti tutorial ini, Anda akan memiliki aplikasi Next.js 14 yang modern, cepat, dan siap produksi pada tahun 2026.
{{ $json.conclusion }}
{{ $json.seo.meta_description }}
{{ $json.seo.keywords }}
{{ $json.hashtags }}
0 Komentar