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

Next.js 14 menjadi standar baru untuk pengembangan web modern. Tutorial ini membimbing Anda dari instalasi, konfigurasi, hingga deployment dengan praktik terbaik untuk performa optimal.

1. Prasyarat

Sebelum memulai, pastikan Anda telah menginstal:

• Node.js v20.x atau lebih baru (download di nodejs.org)
• Git
• VS Code atau editor favorit
• Akun Vercel (gratis) untuk deploy

2. Membuat Proyek Next.js 14

1. Inisialisasi proyek

   npx create-next-app@latest my-next14-app --typescript

   Pilih Yes untuk src directory dan App Router ketika diminta.
2. Masuk ke folder proyek

   cd my-next14-app

3. Jalankan mode development

   npm run dev

   Buka http://localhost:3000 di browser, Anda akan melihat halaman starter Next.js.

3. Menambahkan Tailwind CSS (v3.4)

1. Install dependensi Tailwind, PostCSS, dan Autoprefixer

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Inisialisasi konfigurasi Tailwind

   npx tailwindcss init -p

   File tailwind.config.js dan postcss.config.js akan dibuat.
3. Update tailwind.config.js

   module.exports = {
     content: [
       "./src/**/*.{js,ts,jsx,tsx}",
       "./app/**/*.{js,ts,jsx,tsx}"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

4. Tambahkan Tailwind directives ke src/app/globals.css

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

5. Restart server dan verifikasi styling dengan menambahkan kelas Tailwind di halaman contoh, misalnya class="text-2xl font-bold text-blue-600".

4. Mengatur Layout Global dengan App Router

1. Buat file src/app/layout.tsx (jika belum ada) dan tambahkan struktur dasar:

   export const metadata = {
     title: "Next.js 14 Demo",
     description: "Aplikasi contoh dengan App Router dan Tailwind",
   };
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       
         
           {children}
         
       
     );
   }

2. Gunakan metadata untuk SEO otomatis; Next.js 14 akan menyuntikkan tag <title> dan meta.

5. Membuat Halaman Dinamis dengan Server Components

1. Buat folder src/app/blog dan file page.tsx:

   import type { Metadata } from 'next';
   
   export const metadata: Metadata = {
     title: "Blog — Next.js 14",
   };
   
   export default async function BlogPage() {
     // Simulasi fetch data dari API publik
     const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
     const posts = await res.json();
     return (
       
   
         
   Latest Posts
         
   
           {posts.map((p: any) => (
             
   
               
   {p.title}
               
   {p.body}
             
           ))}
         
       
     );
   }

2. Karena file berada di app directory, ini otomatis menjadi Server Component, memanfaatkan streaming HTML untuk first‑byte time yang sangat cepat.

6. Menambahkan API Route dengan Edge Runtime

1. Buat folder src/app/api/hello/route.ts dan isi:

   export const runtime = 'edge';
   
   export async function GET(request: Request) {
     return new Response(JSON.stringify({ message: 'Hello from Edge Runtime!' }), {
       headers: { 'Content-Type': 'application/json' },
     });
   }

   Dengan menambahkan runtime = 'edge', fungsi ini dijalankan di Vercel Edge Network, memberikan latency < 10 ms pada mayoritas pengguna.
2. Uji dengan curl http://localhost:3000/api/hello.

7. Konfigurasi ESLint & Prettier (Best Practice)

1. Install paket linting:

   npm install -D eslint eslint-config-next prettier

2. Tambahkan file .eslintrc.json:

   {
     "extends": ["next/core-web-vitals", "prettier"],
     "rules": {
       "@next/next/no-img-element": "off"
     }
   }

3. Tambahkan script di package.json:

   "lint": "next lint", "format": "prettier --write ."

4. Jalankan npm run lint dan npm run format untuk memastikan kode konsisten.

8. Optimasi Performa

• Image Optimization: Ganti tag img dengan next/image. Contoh:

  import Image from 'next/image';
  
  
  

• Font Loading: Tambahkan font Google secara optimal lewat next/font/google.
• Static Generation: Untuk konten tidak berubah, gunakan export const revalidate = 86400; di halaman untuk ISR (Incremental Static Regeneration).

9. Deploy ke Vercel

1. Push kode ke GitHub.
2. Buka vercel.com dan klik New Project.
3. Import repository, pilih Next.js sebagai framework.
4. Biarkan variabel lingkungan default (tidak ada secret) dan klik Deploy.
5. Setelah selesai, Vercel akan memberikan URL https://my-next14-app.vercel.app. Periksa Performance tab di dashboard untuk melihat metric LCP < 1 s.

10. Penutup & Next Steps

Anda sekarang memiliki aplikasi Next.js 14 yang modern, menggunakan App Router, Tailwind CSS, Edge API, dan sudah ter‑deploy secara global. Untuk meningkatkan lebih jauh, pertimbangkan:

• Integrasi Vercel KV untuk caching data.
• Menggunakan segment config untuk kontrol cache per‑segment.
• Menambahkan OpenAI API untuk fitur AI‑driven, misalnya summarizer artikel.

Next.js 14 memperkenalkan paradigma App Router yang menyederhanakan struktur proyek dan meningkatkan performa lewat Server Components dan Edge Runtime. Dengan mengikuti langkah‑langkah di atas—instalasi, styling dengan Tailwind, pembuatan halaman dinamis, API edge, serta praktik linting dan optimasi—Anda dapat menghasilkan aplikasi web yang cepat, aman, dan siap skala global. Deploy ke Vercel meminimalkan konfigurasi infrastruktur, memungkinkan fokus pada logika bisnis dan inovasi fitur baru.

---

Tutorial lengkap Next.js 14 2026: setup App Router, Tailwind CSS, Edge API, linting, performance optimization, dan deployment ke Vercel dengan best practice.

Programming,Software Engineering,Web Development,Next.js,Tailwind CSS,Vercel,Edge Runtime

#Programming #SoftwareEngineering #WebDev #Tech #Coding