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

Tutorial step‑by‑step untuk membangun proyek Next.js 14 terbaru, mengaktifkan TypeScript, App Router, serta integrasi Tailwind CSS, lengkap dengan best practice untuk performa dan keamanan.

1. Prasyarat & Persiapan Lingkungan

Pastikan Anda memiliki:

• Node.js >= 20.10 (unduh di nodejs.org)
• npm 9.x atau pnpm (disarankan pnpm 9)
• Git terinstall untuk version control
• Editor kode modern, misalnya VS Code dengan ekstensi ESLint dan Prettier

1.1. Verifikasi Versi

node -v
# v20.14.0
npm -v
# 9.8.1
pnpm -v
# 9.3.0 (opsional)

2. Membuat Proyek Next.js 14

Kita akan menggunakan create-next-app yang sudah mendukung App Router secara default.

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

Parameter yang dipakai:

• --ts – menginisialisasi TypeScript.
• --eslint – menambahkan konfigurasi ESLint standar.
• --tailwind – menyertakan Tailwind CSS secara otomatis.

2.1. Struktur Direktori Utama

my-next14-app/
├─ app/               # App Router (pages/ deprecated)
│   ├─ layout.tsx
│   ├─ page.tsx
│   └─ …
├─ public/
├─ styles/
│   └─ globals.css
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Instalasi & Konfigurasi Tambahan

3.1. Mengaktifkan ESLint + Prettier

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks
# atau npm i -D …

# Buat .eslintrc.json

{
  "extends": ["next/core-web-vitals", "plugin:react/recommended", "prettier"],
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@next/next/no-html-link-for-pages": "off"
  }
}

3.2. Menambahkan lint‑staged + husky untuk pre‑commit

pnpm add -D husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

# package.json snippet
"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
}

3.3. Mengoptimalkan Tailwind

Update tailwind.config.ts supaya hanya menyertakan kelas yang dipakai.

import type { Config } from 'tailwindcss';

export default { 
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

4. Membuat Halaman dengan App Router

4.1. Layout Global

// app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'Setup modern dengan TypeScript, App Router, dan Tailwind',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

4.2. Halaman Home (SSR + ISR)

// app/page.tsx
import Image from 'next/image';

export const revalidate = 60; // Incremental Static Regeneration tiap 60 detik

export default function Home() {
  return (
    

      
Hello, Next.js 14!
      
      
Built with TypeScript, Tailwind, and the new App Router.
    
  );
}

4.3. Dynamic Route dengan Server Component

// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getPostBySlug } from '@/lib/posts';

interface Props {
  params: { slug: string };
}

export async function generateMetadata({ params }: Props) {
  const post = await getPostBySlug(params.slug);
  if (!post) return { title: 'Not found' };
  return { title: post.title };
}

export default async function PostPage({ params }: Props) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

5. Menambahkan API Route (Edge Function)

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export const runtime = 'edge'; // Deploy sebagai Edge Function

export async function GET() {
  return NextResponse.json({ message: 'Hello from Edge!' });
}

5.1. Keamanan Header

Update next.config.mjs untuk menambah CSP dan X‑Frame‑Options.

export default defineConfig({
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self'" },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' }
        ]
      }
    ];
  }
});

6. Optimasi Perform & Best Practice

• Image Optimization: Gunakan next/image dengan loader: 'default'. Semua gambar otomatis WebP.
• Code Splitting: App Router memecah bundle per route secara otomatis.
• Prefetching: Tambahkan prefetch pada Link bila diperlukan.

  import Link from 'next/link';
  Blog
  

• Static Generation + ISR: Gunakan revalidate pada halaman yang berubah sesekali.
• Environment Variables: Simpan di .env.local dan akses via process.env.NEXT_PUBLIC_* untuk variabel publik.

7. Deploy ke Vercel (Free Tier)

1. Commit semua perubahan ke repository GitHub.
2. Buka vercel.com/new dan hubungkan repo.
3. Pilih Next.js sebagai framework otomatis.
4. Di Settings > Environment Variables, tambahkan variabel yang diperlukan.
5. Deploy! Vercel akan menjalankan npm run build && npm start secara internal.

7.1. Monitoring & Logging

Gunakan @vercel/analytics untuk metrik real‑time, dan aktifkan Log Drains ke Datadog atau CloudWatch bila diperlukan.

8. Testing Otomatis

8.1. Unit Test dengan Jest & React Testing Library

pnpm add -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom
npx jest --init

Contoh test untuk komponen Button:

// components/__tests__/Button.test.tsx
import { render, screen } from '@testing-library/react';
import Button from '../Button';

test('renders button with label', () => {
  render();
  expect(screen.getByRole('button')).toHaveTextContent('Click me');
});

8.2. End‑to‑End Test dengan Playwright

pnpm add -D @playwright/test
npx playwright install

// tests/home.spec.ts
import { test, expect } from '@playwright/test';

test('home page shows greeting', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('h1')).toHaveText('Hello, Next.js 14!');
});

9. Kesimpulan

Dengan mengikuti tutorial ini, Anda memiliki proyek Next.js 14 yang lengkap: TypeScript, App Router, Tailwind, linting, testing, CI/CD (via Vercel) dan security header. Anda dapat memperluasnya dengan autentikasi (NextAuth), database (Prisma), atau integrasi AI (OpenAI SDK) sesuai kebutuhan.

Next.js 14 menyatukan kemudahan pengembangan modern dengan performa kelas‑enterprise. Menggunakan TypeScript, App Router, dan Tailwind memberikan fondasi yang kuat, sementara praktik lint‑staged, security header, dan testing memastikan kualitas kode yang tinggi. Deploy ke Vercel dalam hitungan menit menjadikan workflow end‑to‑end hampir tanpa friction—pilihan ideal bagi tim atau developer solo yang mengutamakan Programming yang bersih, scalable, dan siap produksi.

---

Tutorial step-by-step Next.js 14 dengan TypeScript, App Router, Tailwind CSS, linting, testing, dan deploy Vercel. Lengkap dengan best practice untuk Programming, Software Engineering, dan Web Development pada 2026.

Programming,Software Engineering,Web Development,Next.js 14,TypeScript,Tailwind CSS,App Router,Vercel,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding