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

Muhammad Akil Juni 25, 2026


Next.js 14 menjadi standar baru untuk pembangunan aplikasi React modern. Tutorial ini membimbing Anda step‑by‑step menginstal, mengkonfigurasi App Router, mengintegrasikan Tailwind CSS, menambahkan TypeScript, serta melakukan deploy otomatis ke Vercel dengan CI/CD.

1. Persiapan Lingkungan

1.1. Pastikan Node.js dan npm terinstall

Next.js 14 memerlukan Node.js >=20. Buka terminal dan jalankan:

node -v
npm -v

Jika versi lebih rendah, unduh installer LTS terbaru dari nodejs.org dan ikuti petunjuk instalasi.

1.2. Buat akun Vercel

Vercel menyediakan hosting khusus untuk aplikasi Next.js. Daftar di vercel.com dengan email atau GitHub.

2. Membuat Proyek Next.js 14

2.1. Inisialisasi proyek

Buka direktori kerja dan jalankan perintah berikut:

npx create-next-app@latest my-next-app \
  --ts \
  --eslint \
  --src-dir \
  --app
cd my-next-app

Opsi --app secara otomatis mengaktifkan App Router (fitur baru di Next.js 14). Proyek akan berisi struktur src/app dengan file layout dan page default.

2.2. Struktur folder penting

  • src/app: halaman berbasis file system router.
  • src/pages: fallback legacy (tidak diperlukan).
  • next.config.mjs: konfigurasi Next.js.
  • tailwind.config.ts: konfigurasi Tailwind CSS.

3. Mengintegrasikan Tailwind CSS 3.4

3.1. Instalasi paket Tailwind

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

3.2. Inisialisasi konfigurasi

npx tailwindcss init -p

File tailwind.config.ts akan dibuat. Edit menjadi:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3.3. Tambahkan direktif Tailwind ke CSS global

Buat file src/app/globals.css (atau gunakan yang sudah ada) dan isi:

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

3.4. Import CSS global di layout

Di src/app/layout.tsx tambahkan import:

import "./globals.css";

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

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

4. Membuat Halaman UI dengan Tailwind

4.1. Halaman Home

Buat file src/app/page.tsx (ini menggantikan index.js lama).

export default function Home() {
  return (
    

      

        Selamat Datang di Next.js 14
      

      

        Ini contoh proyek dengan App Router, TypeScript, dan Tailwind CSS.
      

      
        Lihat Halaman About
      
    

  );
}

4.2. Halaman About (nested route)

Buat folder src/app/about dengan file page.tsx:

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

export default function About() {
  return (
    

      
Tentang Aplikasi Ini

      

        Demo ini menampilkan cara cepat membangun aplikasi modern menggunakan Next.js 14, App Router, dan Tailwind CSS. Semua kode TypeScript, linted dengan ESLint, dan siap di‑deploy ke Vercel.
      

    

  );
}

5. Konfigurasi ESLint & Prettier (Best Practice)

5.1. Install paket

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

5.2. Buat .eslintrc.cjs

module.exports = {
  env: { browser: true, es2021: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 2022, sourceType: "module" },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-explicit-any": "warn",
  },
  settings: { react: { version: "detect" } },
};

5.3. Buat .prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

6. Menambahkan API Route dengan Edge Runtime

6.1. Buat folder src/app/api/hello/route.ts

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

6.2. Konsumsi API di UI

Update src/app/page.tsx untuk fetch data saat mount.

import { useEffect, useState } from "react";

export default function Home() {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    fetch("/api/hello")
      .then((res) => res.json())
      .then((data) => setMsg(data.message));
  }, []);

  return (
    

      
{msg || "Loading..."}

      {/* ...sisa UI seperti sebelumnya */}
    

  );
}

7. Pengujian Lokal & Optimasi Build

7.1. Jalankan development server

npm run dev

Akses http://localhost:3000 dan pastikan semua halaman serta API berfungsi.

7.2. Analisis bundle dengan next‑bundle‑analyzer

npm install -D @next/bundle-analyzer

// tambahkan ke next.config.mjs
import { join } from "path";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: { appDir: true },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.plugins.push(
        new (require("@next/bundle-analyzer").BundleAnalyzerPlugin)({
          analyzerMode: "static",
          reportFilename: join(__dirname, "./bundle-report.html"),
        })
      );
    }
    return config;
  },
};
export default nextConfig;

Jalankan npm run build lalu buka bundle-report.html untuk mengecek ukuran modul.

8. Deploy ke Vercel dengan GitHub Integration

8.1. Push repository ke GitHub

git init
git add .
git commit -m "Initial commit - Next.js 14 + Tailwind"
git branch -M main
git remote add origin https://github.com/USERNAME/my-next-app.git
git push -u origin main

8.2. Hubungkan ke Vercel

  1. Buka dashboard Vercel → New Project.
  2. Pilih repository my-next-app.
  3. Vercel otomatis mendeteksi framework Next.js, gunakan default build command npm run build dan output directory .next.
  4. Aktifkan Preview Deployments untuk setiap pull request.

8.3. Tambahkan Environment Variable (opsional)

Jika Anda memiliki API key, buka Settings → Environment Variables pada proyek Vercel, tambahkan NEXT_PUBLIC_API_KEY dengan nilai rahasia.

8.4. Verifikasi Deploy

Setelah build selesai, Vercel menampilkan URL produksi seperti https://my-next-app.vercel.app. Cek halaman Home, About, dan API /api/hello untuk konfirmasi.

9. CI/CD dengan GitHub Actions (Advanced)

9.1. Buat file .github/workflows/deploy.yml

name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: "--prod"
          working-directory: .
          github-token: ${{ secrets.GITHUB_TOKEN }}

Pastikan Anda menambahkan VERCEL_TOKEN (personal token) di Settings → Secrets pada repo GitHub.

10. Tips Performance & Security (Best Practice)

  • Image Optimization: Gunakan <Image> dari next/image untuk otomatis lazy‑load dan WebP.
  • Static Generation (SSG): Pada halaman yang tidak membutuhkan data dinamis, ekspor export const revalidate = 86400; untuk ISR.
  • HTTP Security Headers: Tambahkan middleware di src/middleware.ts untuk menetapkan CSP, X‑Frame‑Options, dan lainnya.
  • Audit Dependencies: Jalankan npm audit --production secara rutin dan perbarui paket dengan npm outdated setiap minggu.

Dengan mengikuti tutorial ini Anda kini memiliki aplikasi Next.js 14 yang modern, tipe‑safe, teroptimasi dengan Tailwind CSS, serta terhubung ke pipeline CI/CD otomatis lewat Vercel. Struktur App Router memudahkan skalabilitas, sementara praktik linting, testing bundle, dan keamanan header menjadikan proyek siap produksi. Mulailah menambahkan fitur business‑logic, integrasi database (Prisma, Supabase), atau AI (OpenAI API) untuk memperkaya fungsionalitas.
Panduan lengkap setup Next.js 14 dengan App Router, Tailwind CSS, TypeScript, dan deployment otomatis ke Vercel. Termasuk langkah instalasi, konfigurasi, contoh kode, best practice, dan CI/CD dengan GitHub Actions.

Programming,Software Engineering,Web Development,Next.js,Tailwind CSS,Vercel,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar