Next.js 14 memperkenalkan App Router generasi berikutnya, Server Actions, dan integrasi TypeScript yang lebih kuat. Ikuti tutorial step‑by‑step ini untuk membangun aplikasi React modern dengan performa optimal, SEO‑friendly, dan siap produksi pada Juli 2026.
1. Prasyarat & Persiapan Lingkungan
Pastikan Anda memiliki:
- Node.js >= 20.10 (LTS) – unduh di nodejs.org
- npm atau Yarn (versi 2+), atau pnpm (rekomendasi)
- Git untuk version control
- Editor kode – VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense
Verifikasi instalasi:
node -v npm -v
2. Membuat Project Next.js 14 Baru
2.1 Inisialisasi dengan pnpm
pnpm create next-app@latest my-next14-app --ts --app
Perintah di atas akan:
- Menggunakan
create-next-appversi terbaru yang mendukung Next.js 14. - Mengaktifkan TypeScript (
--ts) dan App Router (--app). - Membuat struktur folder
app/alih‑alihpages/.
2.2 Install Dependensi Tambahan
cd my-next14-app pnpm add tailwindcss@latest postcss@latest autoprefixer@latest pnpm add -D @types/node eslint prettier eslint-config-next pnpm exec tailwindcss init -p
Konfigurasi tailwind.config.cjs:
module.exports = {
content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
theme: { extend: {} },
plugins: [],
};
Tambahkan Tailwind ke globals.css:
@tailwind base; @tailwind components; @tailwind utilities;
3. Struktur Dasar App Router
Folder app/ kini menggantikan pages/. Contoh struktur minimal:
app/ ├─ layout.tsx # Layout global ├─ page.tsx # Halaman beranda ├─ about/ │ └─ page.tsx # Halaman /about ├─ api/ │ └─ hello/route.ts # API Route contoh └─ globals.css
3.1 Membuat Layout Global
/* app/layout.tsx */
import "./globals.css";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Next.js 14 App Router Demo",
description: "Aplikasi contoh dengan Server Actions dan TypeScript",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
Next.js 14 Demo
{children}
);
}
3.2 Membuat Halaman Beranda
/* app/page.tsx */
import Link from "next/link";
export default function Home() {
return (
Selamat Datang di Next.js 14
Ini adalah contoh implementasi App Router, Server Actions, dan Tailwind.
);
}
4. Menggunakan Server Actions (Beta di 14)
Server Actions memungkinkan fungsi dijalankan di server tanpa membuat API terpisah. Cocok untuk form handling, mutasi database, atau panggilan OpenAI API.
4.1 Mengaktifkan Experimental Flag
Tambahkan ke next.config.mjs:
export default defineConfig({
experimental: { serverActions: true },
});
4.2 Membuat Form dengan Server Action
/* app/contact/page.tsx */
"use server";
import { revalidatePath } from "next/cache";
async function submitContact(formData: FormData) {
const name = formData.get("name") as string;
const email = formData.get("email") as string;
const message = formData.get("message") as string;
// Simulasi penyimpanan – dalam produksi gunakan Prisma atau Drizzle ORM
console.log("Contact submission:", { name, email, message });
// Opsional: revalidate cache pada halaman /contact
revalidatePath("/contact");
}
export default function ContactPage() {
return (
);
}
Perhatikan deklarasi "use server" di atas fungsi – ini menandakan eksekusi di server.
5. Integrasi Database dengan Prisma 5 (stable pada 2026)
5.1 Instalasi Prisma
pnpm add prisma@5 @prisma/client@5 pnpm exec prisma init --datasource-provider postgresql
Edit .env dengan URL Postgres (contoh menggunakan Supabase):
DATABASE_URL="postgresql://USER:PASSWORD@db.supabase.co:5432/mydb"
5.2 Definisikan Model
/* prisma/schema.prisma */
model Contact {
id Int @id @default(autoincrement())
name String
email String @unique
message String
createdAt DateTime @default(now())
}
pnpm exec prisma migrate dev --name init
5.3 Memanggil Prisma dalam Server Action
/* app/contact/page.tsx (update) */
"use server";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
async function submitContact(formData: FormData) {
const name = formData.get("name") as string;
const email = formData.get("email") as string;
const message = formData.get("message") as string;
await prisma.contact.create({
data: { name, email, message },
});
revalidatePath("/contact");
}
6. Deploy ke Vercel dengan Edge Runtime
6.1 Persiapan Repo Git
git init git add . git commit -m "Initial commit – Next.js 14 with Server Actions" git branch -M main # Buat repo di GitHub lalu push git remote add origin https://github.com/username/my-next14-app.git git push -u origin main
6.2 Menghubungkan ke Vercel
1. Masuk ke vercel.com.
2. Pilih New Project** → Import Git Repository.
3. Vercel otomatis mendeteksi Next.js 14, pilih Framework Preset: Next.js**.
4. Pada Build & Output Settings**, pastikan npm run build (atau pnpm run build) dan output: "standalone" di next.config.mjs jika ingin image Docker.
5. Tambahkan variabel lingkungan DATABASE_URL pada Settings → Environment Variables.
6. Deploy!
7. Best Practices & Optimasi
- Static Generation (SSG) untuk halaman publik – gunakan
export const dynamic = "force-static";bila memungkinkan. - Image Optimization – manfaatkan
next/imagedengan loader default Vercel. - Cache Control – set
Cache‑Controlheader lewatnext.config.mjsuntuk asset statis. - Linting & Formatting – jalankan
pnpm lint && pnpm formatpada pre‑commit hook (husky). - Security – enable
Content‑Security‑Policydinext‑security‑headersatau secara manual dimiddleware.ts. - Performance Monitoring – integrasikan dengan Vercel Analytics atau OpenTelemetry.
8. Testing dengan Jest & React Testing Library
pnpm add -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-domContoh test komponen:
/** __tests__/Home.test.tsx */ import { render, screen } from "@testing-library/react"; import Home from "../app/page"; test("renders welcome message", () => { render(); expect(screen.getByText(/Selamat Datang di Next.js 14/i)).toBeInTheDocument(); }); 9. Ringkasan
Tutorial ini memandu Anda dari instalasi Next.js 14, konfigurasi App Router, implementasi Server Actions, integrasi Prisma untuk penyimpanan, hingga deploy ke Vercel dengan praktik terbaik. Dengan fondasi ini, Anda siap membangun aplikasi web modern yang cepat, SEO‑friendly, dan scalable.
Next.js 14 menawarkan paradigma baru lewat App Router dan Server Actions yang menyederhanakan arsitektur full‑stack. Dengan TypeScript, Tailwind, dan Prisma, Anda dapat menciptakan aplikasi yang performant dan mudah dipelihara. Ikuti langkah‑langkah di atas, terapkan best practice, dan manfaatkan deployment otomatis Vercel untuk mempercepat time‑to‑market. Selamat coding!
Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, TypeScript, dan Prisma. Tutorial step-by-step, contoh kode, best practice, dan cara deploy ke Vercel.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar