Panduan Lengkap Setup Next.js 14 dengan App Router, TypeScript, dan Tailwind CSS (2026)

Next.js 14 menjadi standar de facto untuk pengembangan aplikasi React modern. Tutorial ini memberikan langkah‑step yang detail untuk meng‑install, meng‑konfigurasi, dan membangun proyek starter dengan TypeScript, Tailwind CSS, serta best practice keamanan dan performa.

1. Prasyarat

Sebelum memulai pastikan Anda memiliki:

Node.js v20.10 atau lebih tinggi (node -v)
npm v10 atau Yarn v4 (pilih salah satu)
Git untuk version control
Editor kode, disarankan VS Code dengan ekstensi ESLint dan Prettier

2. Membuat Project Baru

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --app

Perintah di atas men‑generate folder my-next14-app dengan struktur baru yang mengaktifkan App Router (folder app/), TypeScript, dan konfigurasi ESLint default.

2.1 Verifikasi Instalasi

cd my-next14-app
npm run dev   // atau yarn dev

Buka http://localhost:3000 dan pastikan halaman "Welcome to Next.js" muncul.

3. Menambahkan Tailwind CSS

Tailwind memudahkan styling utility‑first. Ikuti langkah berikut:

Instalasi paket:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

File tailwind.config.js otomatis terbuat. Edit menjadi:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambah direktif Tailwind ke ./app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Pastikan file globals.css di‑import di ./app/layout.tsx:

import './globals.css';

4. Struktur Direktori yang Disarankan

Berikut layout yang memudahkan scaling:

my-next14-app/
├─ app/
│  ├─ (auth)/          // route grup untuk otentikasi
│  ├─ dashboard/
│  │   └─ page.tsx
│  ├─ layout.tsx       // root layout dengan provider
│  └─ page.tsx         // landing page
├─ components/
│  ├─ ui/
│  │   ├─ button.tsx
│  │   └─ card.tsx
│  └─ icons/
├─ lib/
│  ├─ trpc.ts          // client TRPC instance
│  └─ auth.ts          // helper auth
├─ server/
│  └─ trpc/
│     └─ router.ts
└─ prisma/
   └─ schema.prisma

5. Mengintegrasikan Prisma ORM (PostgreSQL)

Instalasi paket:

npm install prisma @prisma/client
npx prisma init --datasource-provider postgresql

Edit .env dengan connection string nyata:

DATABASE_URL="postgresql://user:password@localhost:5432/next14db"

Definisikan model contoh di prisma/schema.prisma:

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

Gunakan Prisma di API route app/api/users/route.ts:

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function GET() {
  const users = await prisma.user.findMany();
  return Response.json(users);
}

6. Menambahkan tRPC untuk Type‑Safe API

tRPC meminimalisir boilerplate antara client dan server.

npm install @trpc/server @trpc/client @trpc/react-query zod

Buat router di server/trpc/router.ts:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import { prisma } from '../../prisma/client';

const t = initTRPC.create();

export const appRouter = t.router({
  getUser: t.procedure
    .input(z.string())
    .query(async ({ input }) => {
      return await prisma.user.findUnique({ where: { id: input } });
    }),
});

export type AppRouter = typeof appRouter;

Client side di lib/trpc.ts:

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/trpc/router';

export const trpc = createTRPCReact();

export const trpcClient = trpc.createClient({
  url: '/api/trpc',
});

Gunakan di komponen:

import { trpc } from '@/lib/trpc';

export default function Profile({ userId }: { userId: string }) {
  const { data, isLoading } = trpc.getUser.useQuery(userId);
  if (isLoading) return Loading…;
  return {data?.name ?? 'Tanpa Nama'};
}

7. Keamanan & Best Practice

HTTP Headers: Tambahkan helmet lewat middleware Next.js (middleware.ts) untuk CSP, X‑XSS‑Protection, dll.
Rate Limiting: Gunakan next-rate-limit pada API route kritis.
Environment Variables: Simpan rahasia di .env.local dan pastikan tidak masuk ke repo (gitignore sudah mencakup).
Static Site Generation (SSG) vs Server‑Side Rendering (SSR): Gunakan export const revalidate = 60; pada page yang dapat di‑cache selama 60 detik untuk meningkatkan performa.
Image Optimization: Manfaatkan next/image dengan loader default Cloudinary atau Imgix untuk CDN.

8. Deployment ke Vercel (Recommended)

Push repository ke GitHub.
Buka vercel.com dan pilih "New Project”.
Import repo, pastikan framework otomatis terdeteksi sebagai Next.js 14.
Set environment variables (DATABASE_URL, NEXT_PUBLIC_…) pada pengaturan Vercel.
Deploy! Vercel akan menghasilkan preview URL untuk setiap push.

9. Monitoring & Observability

Integrasikan OpenTelemetry dengan Next.js melalui plugin @opentelemetry/sdk-node. Kirim data ke Datadog atau Grafana Cloud untuk tracing request latency, query DB, dan error rate.

10. Tips Produktivitas

Enable "experimental" : { "optimizePackageImports": true } di next.config.js untuk tree‑shaking lebih agresif.
Gunakan npm run lint dan npm run format sebelum commit.
Manfaatkan pnpm bila proyek tumbuh besar; savings ruang disk hingga 30%.

Dengan mengikuti tutorial ini Anda memiliki pondasi kuat untuk aplikasi Next.js 14 yang modern: TypeScript untuk tipe‑safety, Tailwind untuk styling cepat, Prisma + PostgreSQL untuk data persistence, dan tRPC untuk API type‑safe. Implementasi security header, rate limiting, serta observability memastikan aplikasi siap produksi di Vercel atau platform cloud lain. Selamat meng‑code, dan terus eksplorasi fitur baru seperti Server Actions yang akan muncul di rilis berikutnya!

Panduan lengkap setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, Prisma, dan tRPC. Langkah demi langkah, contoh kode, best practice keamanan, dan deployment ke Vercel.

Programming,Software Engineering,Web Development,Next.js 14,TypeScript,Tailwind CSS,tRPC,Prisma

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma