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

Tutorial step‑by‑step ini membantu developer menyiapkan proyek Next.js 14 terbaru, mengaktifkan App Router, menambahkan TypeScript dan Tailwind CSS, serta menerapkan best practice untuk keamanan dan performa.

1. Persiapan Lingkungan

Pastikan Node.js versi LTS terbaru (v20.12 atau lebih tinggi) terinstall. Gunakan nvm untuk mengelola versi secara fleksibel:

nvm install 20
nvm use 20

Verifikasi instalasi:

node -v
npm -v

2. Membuat Proyek Next.js 14

Next.js 14 memperkenalkan App Router sebagai default. Jalankan perintah berikut untuk membuat proyek baru dengan TypeScript:

npx create-next-app@latest my-next-app --ts

Perintah di atas meng‑generate struktur folder, menginstal dependensi, dan menyiapkan tsconfig.json otomatis.

3. Mengaktifkan Tailwind CSS

Tailwind CSS tetap menjadi pilihan utama untuk styling utility‑first pada 2026. Ikuti langkah berikut:

1. Instal paket Tailwind dan peer dependencies:

cd my-next-app
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Inisialisasi konfigurasi Tailwind:

npx tailwindcss init -p

File tailwind.config.js akan dibuat bersama postcss.config.js.

3. Konfigurasi tailwind.config.js untuk mendukung App Router:

/** @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: [],
};

4. Tambahkan direktif Tailwind ke file CSS utama (app/globals.css):

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

Pastikan globals.css di‑import di app/layout.tsx sehingga styling berlaku global.

4. Struktur Dasar App Router

Next.js 14 menggantikan pages dengan folder app. Berikut contoh struktur minimal:

my-next-app/
├─ app/
│  ├─ layout.tsx          # Root layout
│  ├─ page.tsx            # Home page (/) 
│  ├─ about/
│  │   └─ page.tsx        # /about route
│  └─ dashboard/
│      └─ page.tsx        # /dashboard route
├─ public/
├─ tsconfig.json
└─ ...

File layout.tsx berfungsi sebagai template yang dibungkus di setiap halaman:

import "./globals.css";

export const metadata = {
  title: "My Next.js 14 App",
  description: "Demo App Router dengan TypeScript & Tailwind",
};

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

          

            Home
            

              About
              Dashboard
            
          
        
        
{children}
        

          © {new Date().getFullYear()} My Next.js 14 App
        
      
    
  );
}

Dengan konfigurasi ini, setiap halaman otomatis mendapatkan header, footer, dan styling Tailwind.

5. Menambahkan Halaman dengan TypeScript

Buat file app/about/page.tsx:

export const metadata = { title: "About" };

export default function AboutPage() {
  return (
    

      
About This Project
      

        This tutorial demonstrates how to bootstrap a modern Next.js 14 application
        using TypeScript, the new App Router, and Tailwind CSS. The code follows best
        practices for scalability and performance.
      
    
  );
}

Perhatikan penggunaan metadata untuk SEO otomatis—fitur yang ditingkatkan di Next.js 14.

6. Konfigurasi ESLint & Prettier (Best Practice)

Linting membantu menjaga kualitas kode. Install paket berikut:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-react-hooks

Contoh .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "warn",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Tambahkan skrip npm:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
}

Jalankan npm run lint untuk memeriksa kode.

7. Optimasi Performance & Security

• Image Optimization: Gunakan next/image untuk gambar otomatis di‑optimasi dengan format modern (AVIF, WebP).
• Static Rendering: Export halaman yang tidak memerlukan data dinamis sebagai export const dynamic = 'force-static'; untuk mendapatkan ISR (Incremental Static Regeneration) yang lebih cepat.
• Header Security: Tambahkan middleware untuk men‑set header CSP, X‑Content‑Type‑Options, dan Referrer‑Policy.

Contoh middleware.ts:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set("Content-Security-Policy", "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com");
  response.headers.set("X-Content-Type-Options", "nosniff");
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
  return response;
}

export const config = {
  matcher: "/:path*",
};

8. Deploy ke Vercel (One‑Click Production)

Vercel tetap platform utama untuk Next.js. Langkah-langkah:

1. Push repo ke GitHub.
2. Buka Vercel dashboard dan pilih repository.
3. Pastikan framework terdeteksi sebagai Next.js dan variabel lingkungan (jika ada) ditambahkan.
4. Klik Deploy. Vercel otomatis menjalankan npm install, npm run build, lalu menyajikan output.

Setelah deploy, periksa /_next/static untuk memastikan asset statis di‑cache dengan header Cache-Control: public, max-age=31536000, immutable.

9. Testing dengan Jest & React Testing Library

Testing meningkatkan kepercayaan kode. Install dependensi:

npm install -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

Inisialisasi Jest:

npx ts-jest config:init

Contoh tes untuk AboutPage:

import { render, screen } from "@testing-library/react";
import AboutPage from "@/app/about/page";

test("renders about heading", () => {
  render();
  const heading = screen.getByRole("heading", { name: /about this project/i });
  expect(heading).toBeInTheDocument();
});

Jalankan npm test untuk melihat hasil.

10. Kesimpulan Implementasi

Dengan mengikuti langkah di atas, Anda kini memiliki proyek Next.js 14 yang modern, tipe‑aman dengan TypeScript, bergaya cepat menggunakan Tailwind CSS, serta siap produksi dengan keamanan, performa, dan testing yang terintegrasi. Anda bisa memperluas proyek dengan API Routes, Server Actions, atau integrasi AI (misalnya OpenAI SDK) tanpa mengubah fondasi dasar yang sudah solid.

Tutorial ini memberikan rangkaian lengkap dari instalasi hingga deployment, menekankan best practice dalam Programming, Software Engineering, dan Web Development. Ikuti langkahnya, adaptasi sesuai kebutuhan tim, dan nikmati produktivitas maksimal dengan Next.js 14.

---

Panduan step‑by‑step setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, linting, security, testing, dan deployment ke Vercel. Cocok untuk developer Programming, Software Engineering, dan Web Development tahun 2026.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding