Next.js 14 kini menjadi standar de‑facto untuk pengembangan React modern. Tutorial ini mengajak Anda menyiapkan proyek Next.js 14 dengan App Router, Turbopack, TypeScript, dan integrasi linting serta CI/CD menggunakan GitHub Actions.
1. Persiapan Lingkungan
Pastikan Anda memiliki Node.js versi 20.12.x atau lebih baru serta npm/ yarn terkini. Verifikasi dengan:
node -v
npm -v
Jika belum terinstal, unduh dari nodejs.org. Untuk manajemen versi, disarankan memakai nvm (Node Version Manager).
1.1 Instalasi nvm (opsional)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 202. Membuat Proyek Next.js 14 Baru
Gunakan create-next-app dengan flag --ts untuk TypeScript dan --app agar langsung memakai App Router.
npx create-next-app@latest my-next14-app --ts --app
cd my-next14-appPerintah di atas menghasilkan struktur folder berikut:
my-next14-app/
├─ app/ # App Router (pages/ digantikan)
├─ public/
├─ src/
│ └─ layout.tsx
├─ tsconfig.json
├─ next.config.mjs
└─ package.json3. Mengaktifkan Turbopack
Next.js 14 menggantikan Webpack dengan Turbopack secara default. Pastikan next.config.mjs berisi:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
turbo: true
},
reactStrictMode: true,
swcMinify: true
};
export default nextConfig;Jika Anda menggunakan next start untuk produksi, Turbopack tetap dipakai tanpa konfigurasi tambahan.
4. Setup ESLint & Prettier (Best Practice)
Instal dependensi linting:
npm install -D eslint prettier eslint-config-next eslint-plugin-react-hooks eslint-plugin-react
Tambahkan file .eslintrc.json:
{
"extends": ["next", "next/core-web-vitals", "plugin:react/recommended"],
"plugins": ["react-hooks"],
"rules": {
"react/react-in-jsx-scope": "off",
"@next/next/no-img-element": "off"
}
}Dan .prettierrc sederhana:
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}5. Menulis Halaman Pertama dengan App Router
Buat file app/page.tsx:
import Image from 'next/image';
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-8">
<h1 className="text-4xl font-bold mb-4">Selamat Datang di Next.js 14!</h1>
<Image
src="/vercel.svg"
alt="Vercel Logo"
width={120}
height={120}
/>
</main>
);
}
Catatan: Image otomatis mengoptimasi gambar melalui Next/Image. Pastikan gambar berada di folder public.
6. Menambahkan Layout Global
File app/layout.tsx menjadi wrapper untuk semua route.
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Next.js 14 Demo',
description: 'Demo aplikasi dengan App Router & Turbopack',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className="bg-gray-50 text-gray-900">{children}</body>
</html>
);
}
7. Menggunakan API Routes (Edge Functions)
Next.js 14 memperkenalkan app/api yang berjalan sebagai Edge Functions secara default. Buat app/api/hello/route.ts:
export const runtime = 'edge';
export async function GET(request: Request) {
return new Response(JSON.stringify({ message: 'Hello from Edge!' }), {
headers: { 'Content-Type': 'application/json' },
});
}
Uji dengan http://localhost:3000/api/hello. Karena dijalankan di Edge, latensi lebih rendah dan tidak ada cold start pada Vercel/Netlify.
8. Optimasi Performance (Best Practice)
- Image Optimization: Selalu gunakan
next/imageataunext/future/imageuntuk otomatis WebP & lazy‑loading. - Static Rendering: Gunakan
export const revalidate = 60;pada file page untuk Incremental Static Regeneration (ISR) bila data berubah tiap menit. - Font Loading: Manfaatkan
next/font/googleuntuk meng‑inline font dengan subsetting.
9. Deploy ke Vercel (One‑Click)
Pastikan repository berada di GitHub, lalu:
- Buka vercel.com/new.
- Pilih repository
my-next14-app. - Biarkan semua setting default (framework: Next.js, build command:
npm run build). - Klik Deploy. Vercel otomatis meng‑detect Turbopack dan Edge Functions.
10. Menambahkan CI/CD dengan GitHub Actions
Buat file .github/workflows/ci.yml:
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- run: npm ci
- run: npm run lint -- -f json -o lint-report.json
- run: npm run build
- name: Upload Build Artifacts
uses: actions/upload-artifact@v4
with:
name: nextjs-build
path: .next
Pipeline ini melakukan lint, build, dan menyimpan artefak. Anda dapat menambahkan step npm test bila ada unit test (Jest atau Vitest).
11. Penutup & Langkah Selanjutnya
Anda kini memiliki aplikasi Next.js 14 lengkap dengan TypeScript, Turbopack, linting, API Edge, dan CI/CD. Selanjutnya, eksplorasi fitur-fitur lanjutan seperti:
- Server Components vs Client Components.
- Internationalization (i18n) dengan
next-intl. - Integrasi database Prisma & tRPC untuk tipe end‑to‑end.
Dengan fondasi yang kuat, tim Anda dapat mempercepat iterasi produk sekaligus menjaga kualitas kode.
Next.js 14 memperkenalkan paradigma baru yang menggabungkan App Router, Turbopack, dan Edge Functions dalam satu paket modern. Dengan mengikuti langkah‑langkah di atas, Anda dapat menyiapkan environment yang stabil, menulis kode bersih ber‑TypeScript, serta mengotomatisasi proses build dan deploy melalui CI/CD. Implementasi best practice sejak awal akan meminimalkan technical debt dan memastikan aplikasi tetap scalable serta performant di masa depan.
Tutorial lengkap Next.js 14 2026: setup proyek dengan TypeScript, App Router, Turbopack, linting, API Edge, CI/CD GitHub Actions, dan deployment Vercel. Panduan step‑by‑step untuk developer modern.
Programming,Software Engineering,Web Development,Next.js 14,TypeScript,Turbopack,App Router,CI/CD
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar