Next.js 14 menjadi standar baru bagi pengembang React modern. Tutorial ini menuntun Anda langkah demi langkah menginstal, mengonfigurasi, dan menulis kode contoh project yang siap produksi, lengkap dengan best practice untuk performance, security, dan developer experience.
1. Prasyarat Sistem
Sebelum memulai, pastikan Anda memiliki:
- Node.js v20.12+ (unduh di nodejs.org)
- npm atau pnpm (rekomendasi pnpm v9)
- Git 2.40+
- Editor kode – VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense
2. Membuat Project Baru
# Gunakan pnpm untuk kecepatan instalasi
pnpm create next-app@latest my-next14-app --ts
# Pilih "App Router" ketika diminta (y/n?)
# Pilih "Tailwind CSS" (y)
# Pilih "ESLint" (y)
# Pilih "Prettier" (y)
cd my-next14-app
Perintah di atas menghasilkan struktur folder standar Next.js 14 dengan TypeScript, Tailwind, ESLint, dan Prettier terpasang.
3. Instalasi Dependensi Tambahan
Untuk API modern dan otentikasi, tambahkan paket berikut:
pnpm add @tanstack/react-query @auth0/nextjs-auth0 zod
pnpm add -D @types/nodereact-query membantu caching data, auth0 menyediakan solusi OAuth siap pakai, dan zod untuk validasi schema.
4. Konfigurasi Tailwind CSS
File tailwind.config.ts sudah ada, cukup tambahkan content untuk mendukung App Router:
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}"
],
Jalankan perintah untuk memverifikasi:
pnpm run devBuka http://localhost:3000 – Anda harus melihat halaman berwarna biru Tailwind standar.
5. Struktur Folder Modern
Next.js 14 menggunakan App Router. Berikut contoh struktur yang direkomendasikan:
app/
layout.tsx # root layout dengan dan
page.tsx # halaman utama
(auth)/
login/page.tsx # route /login
callback/page.tsx
dashboard/
layout.tsx # layout khusus dashboard dengan sidebar
page.tsx
components/
ui/
button.tsx
card.tsx
navigation/
navbar.tsx
providers/
query-provider.tsx
lib/
api.ts # wrapper fetch dengan react-query
auth.ts # helper Auth0
validation.ts # schema Zod
hooks/
useUser.ts
utils/
formatDate.ts
public/
favicon.ico
Pengelompokan berdasarkan domain (auth, dashboard) memudahkan skalabilitas.
6. Membuat Root Layout dengan Provider
/* app/layout.tsx */
import "./globals.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Auth0Provider } from "@auth0/nextjs-auth0";
const queryClient = new QueryClient();
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
Next.js 14 Demo
{children}
);
}
Provider di‑root memastikan semua komponen dapat mengakses React Query cache dan Auth0 context.
7. Membuat Halaman Login dengan Auth0
/* app/(auth)/login/page.tsx */
import Link from "next/link";
export default function LoginPage() {
return (
Masuk ke Dashboard
Login dengan Auth0
Belum punya akun? Daftar
);
}
Auth0 menangani callback di /api/auth/callback secara otomatis.
8. API Wrapper dengan React Query
/* lib/api.ts */
import { QueryFunctionContext } from "@tanstack/react-query";
export async function fetcher(url: string, ctx?: QueryFunctionContext): Promise {
const res = await fetch(url, {
method: "GET",
headers: { "Content-Type": "application/json" },
credentials: "include"
});
if (!res.ok) {
const error = await res.json();
throw new Error(error.message || "Network response was not ok");
}
return (await res.json()) as T;
}
Gunakan di komponen dengan useQuery:
const { data, isLoading } = useQuery(["profile"], () => fetcher<UserProfile>("/api/user/profile"));9. Validasi Input dengan Zod
/* lib/validation.ts */
import { z } from "zod";
export const createPostSchema = z.object({
title: z.string().min(5, "Title minimal 5 karakter"),
content: z.string().min(20, "Content minimal 20 karakter"),
});
export type CreatePostInput = z.infer;
Pada API route:
import { createPostSchema } from "@/lib/validation";
export async function POST(req: Request) {
const body = await req.json();
const result = createPostSchema.safeParse(body);
if (!result.success) return new Response(JSON.stringify({ error: result.error.errors }), { status: 400 });
// lanjutkan simpan ke DB
}
10. Deploy ke Vercel dengan Edge Runtime
Setelah selesai, tambahkan file vercel.json untuk mengaktifkan Edge Functions yang meningkatkan latency:
{
"functions": {
"api/**.ts": {
"runtime": "edge",
"maxDuration": 5
}
}
}
Push ke GitHub, hubungkan repo ke Vercel, dan pilih Next.js sebagai framework. Vercel otomatis menjalankan pnpm install && pnpm run build.
11. Best Practice yang Harus Diterapkan
- Type Safety: Selalu gunakan TypeScript Strict Mode (aktifkan di
tsconfig.json). - Code Splitting: Manfaatkan
dynamic()dari Next.js untuk memuat komponen berat secara lazy. - Image Optimization: Pakai
<Image>bawaan Next.js denganloader: "akamai"jika memakai CDN. - Security Headers: Tambahkan middleware yang mengirimkan CSP, X‑Frame‑Options, dan Referrer‑Policy.
- Performance: Aktifkan
reactStrictModedanswcMinifydinext.config.js. Gunakannext/fontuntuk font optimal. - Testing: Implementasikan unit test dengan Jest + React Testing Library dan e2e test dengan Playwright.
12. Troubleshooting Umum
| Masalah | Penyebab | Solusi |
|---|---|---|
| "Cannot find module '@/lib/api'" | Alias @ belum didefinisikan. | Tambahkan di jsconfig.json:
{"compilerOptions":{"baseUrl":".","paths":{"@/*":["./*"]}}} |
| Tailwind tidak menghasilkan kelas | Content array tidak mencakup folder yang berisi JSX. | Perbarui tailwind.config.ts dengan path yang tepat. |
| Auth0 callback error "state mismatch" | Cookie SameSite strict pada local dev. | Set COOKIE_SAMESITE=None di .env.local atau gunakan localhost pada domain whitelist Auth0. |
13. Ringkasan Langkah
- Instal Node.js & pnpm.
- Jalankan
pnpm create next-app@latestdengan TypeScript, App Router, Tailwind. - Tambahkan dependensi: react-query, auth0, zod.
- Konfigurasi Tailwind, alias, dan root layout.
- Buat route otentikasi dan API wrapper.
- Implementasi validasi Zod di API route.
- Optimalkan dengan dynamic import, Image, dan middleware security.
- Deploy ke Vercel dengan Edge Runtime.
- Tambahkan testing dan CI (GitHub Actions) untuk quality gate.
Dengan mengikuti tutorial ini, Anda memiliki basis project Next.js 14 yang modern, scalable, dan siap produksi pada tahun 2026.
Next.js 14 menegaskan posisi React sebagai framework full‑stack terdepan. Menggabungkan App Router, TypeScript, Tailwind CSS, serta integrasi Auth0 dan React Query memberi landasan solid untuk aplikasi web yang cepat, aman, dan mudah dipelihara. Ikuti langkah‑langkah di atas, terapkan best practice, dan gunakan CI/CD Vercel untuk iterasi cepat. Selamat membangun, dan jangan ragu bereksperimen dengan edge middleware atau server actions yang semakin matang di ekosistem Next.js.
Tutorial lengkap setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, Auth0, dan React Query. Langkah demi langkah, contoh kode, konfigurasi, dan best practice untuk Web Development modern.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar