Next.js 14 telah menjadi standar de‑facto untuk pengembangan aplikasi React modern. Tutorial ini memberikan langkah‑langkah detail untuk meng‑install, meng‑konfigurasi, dan membangun proyek pertama Anda menggunakan App Router, React Server Components, dan optimasi performa terkini.
1. Persiapan Lingkungan
Pastikan Anda memiliki Node.js LTS versi 20.11 atau lebih baru, serta git dan pnpm (rekomendasi package manager untuk Next.js). Jika belum, instalasi mudahnya:
# Install Node.js via nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20
# Install pnpm
npm install -g pnpmVerifikasi instalasi:
node -v # harus 20.x
pnpm -v # harus 9.x atau lebih2. Membuat Proyek Next.js 14 Baru
pnpm create next-app@latest my-next14-app -- --ts --eslint --src-dirOpsi di atas menghasilkan struktur src/ modern, TypeScript, dan ESLint siap pakai. Pilih Yes untuk app router ketika diminta.
3. Struktur Dasar App Router
Setelah proses selesai, buka folder proyek:
cd my-next14-appPerhatikan struktur penting:
src/app/– tempat semua route berbasis folder.src/app/layout.tsx– layout global yang dibungkus di semua halaman.src/app/page.tsx– route root (/).
4. Menjalankan Development Server
pnpm devServer akan tersedia di http://localhost:3000. Buka di browser untuk memastikan halaman default muncul.
5. Membuat Halaman Dashboard dengan Server Component
Server Component memungkinkan fetch data di server tanpa menambah bundle JavaScript di client.
// src/app/dashboard/page.tsx
import DashboardStats from './DashboardStats';
export default function DashboardPage() {
return (
Dashboard
);
}
Selanjutnya buat DashboardStats.tsx sebagai Server Component:
// src/app/dashboard/DashboardStats.tsx
export default async function DashboardStats() {
// Contoh fetch ke API publik
const res = await fetch('https://api.coincap.io/v2/assets', { next: { revalidate: 60 } });
const data = await res.json();
const top5 = data.data.slice(0, 5);
return (
{top5.map((coin: any) => (
- {coin.name}: ${Number(coin.priceUsd).toFixed(2)}
))}
);
}
Catatan: Parameter next: { revalidate: 60 } mengaktifkan ISR (Incremental Static Regeneration) tiap 60 detik.
6. Menambahkan Client Component untuk Interaktivitas
Misalnya, tombol refresh yang memanggil API klien.
// src/app/dashboard/RefreshButton.tsx
'use client';
import { useState } from 'react';
export default function RefreshButton() {
const [loading, setLoading] = useState(false);
const handleClick = async () => {
setLoading(true);
await fetch('/api/refresh', { method: 'POST' });
// Next.js 14 tidak memerlukan reload manual; ISR akan memperbarui di server
setLoading(false);
};
return (
);
}
Masukkan komponen ini ke DashboardPage:
// ...
import RefreshButton from './RefreshButton';
// inside return
7. Membuat API Route untuk Trigger ISR Manual
// src/app/api/refresh/route.ts
import { NextResponse } from 'next/server';
export async function POST() {
// Memanggil revalidate secara manual
try {
await fetch('http://localhost:3000/_next/data/development/dashboard.json?force-revalidate=true');
return NextResponse.json({ status: 'ok' });
} catch (err) {
return NextResponse.json({ error: 'revalidation failed' }, { status: 500 });
}
}
8. Konfigurasi ESLint & Prettier (Best Practice)
Next.js 14 sudah menyertakan konfigurasi dasar, namun kami rekomendasikan menambahkan plugin eslint-plugin-next dan eslint-plugin-react untuk standar yang lebih ketat.
# Install plugin tambahan
pnpm add -D eslint-plugin-next eslint-plugin-react
# .eslintrc.js (tambahan)
module.exports = {
extends: ['next/core-web-vitals', 'plugin:react/recommended'],
plugins: ['react'],
rules: {
'react/react-in-jsx-scope': 'off', // Next.js otomatis meng-import React
'@next/next/no-img-element': 'off', // izinkan ![]()
jika diperlukan
},
};
9. Optimasi Performan dengan Image Component & Font Optimization
Gunakan next/image untuk gambar otomatis lazy‑load dan WebP.
import Image from 'next/image';
Untuk font, tambahkan di next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
fontLoaders: [{ loader: '@next/font/google', options: { subsets: ['latin'] } }],
},
};
module.exports = nextConfig;
10. Deploy ke Vercel (Zero‑Config)
Vercel adalah platform resmi Next.js. Hubungkan repo GitHub, pilih framework Next.js, dan biarkan Vercel mendeteksi next.config.js. Semua fitur ISR, Server Components, dan Edge Runtime otomatis berjalan.
11. Monitoring & Error Tracking
Integrasikan Sentry untuk melacak error runtime:
# Install SDK
pnpm add @sentry/nextjs
# sentry.client.config.ts & sentry.server.config.ts (auto‑generated)
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
tracesSampleRate: 1.0,
});
Setelah deploy, periksa dashboard Sentry untuk error real‑time.
12. Kesimpulan Langkah‑Langkah
- Pasang Node.js 20 & pnpm.
- Gunakan
pnpm create next-app@latestdengan TypeScript & app router. - Bangun halaman menggunakan Server Component untuk data‑heavy UI.
- Tambahkan Client Component bila butuh interaksi.
- Manfaatkan ISR dengan
revalidateatau endpoint API manual. - Konfigurasikan linting, gambar, dan font untuk performa optimal.
- Deploy ke Vercel, aktifkan monitoring dengan Sentry.
Dengan mengikuti tutorial ini, Anda tidak hanya memiliki proyek Next.js 14 yang siap produksi, tetapi juga memanfaatkan keunggulan App Router, React Server Components, dan ISR untuk performa yang luar biasa. Praktik linting, optimasi gambar, serta monitoring real‑time menjadikan aplikasi Anda stabil, scalable, dan mudah dipelihara dalam ekosistem modern Web Development.
Panduan langkah demi langkah setup Next.js 14 dengan App Router, React Server Components, ISR, dan deployment Vercel. Cocok untuk developer Programming, Software Engineering, dan Web Development tahun 2026.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar