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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React SSR/SSG. Tutorial ini membahas instalasi, konfigurasi App Router, integrasi Tailwind CSS, serta deployment otomatis ke Vercel dengan pipeline CI/CD modern.

1. Prasyarat

Pastikan Anda memiliki:

Node.js v20.x atau lebih baru (node -v)
npm v10 atau Yarn v4 (pilihan pribadi)
Akun GitHub dan Vercel
Editor kode, rekomendasi VS Code dengan ekstensi ESLint dan Tailwind CSS IntelliSense

2. Membuat Proyek Next.js 14 Baru

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

Perintah di atas menghasilkan proyek TypeScript dengan struktur standar. Pilih Yes untuk App Router ketika diminta.

3. Instalasi Tailwind CSS

# Install Tailwind dan peer dependency
npm install -D tailwindcss postcss autoprefixer
# Inisialisasi konfigurasi default
npx tailwindcss init -p

Hasilnya akan menambah tailwind.config.js dan postcss.config.js.

3.1 Konfigurasi tailwind.config.js

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

Daftar content memberitahu Tailwind untuk memindai semua file di folder app, pages, dan components.

3.2 Tambahkan direktif Tailwind ke CSS global

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

import "../styles/globals.css";

4. Mengatur App Router (Next.js 14)

App Router terletak di folder app. Berikut contoh struktur minimal:

app/
├─ layout.tsx
├─ page.tsx
├─ dashboard/
│  ├─ layout.tsx
│  └─ page.tsx

4.1 Layout Global

/** app/layout.tsx */
import "../styles/globals.css";
export const metadata = {
  title: "Next.js 14 Demo",
  description: "Demo aplikasi dengan App Router & Tailwind CSS",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}

4.2 Halaman Beranda

/** app/page.tsx */
export default function Home() {
  return (
    
      
        Selamat Datang di Next.js 14!
      
    
  );
}

5. Menambahkan Otentikasi dengan NextAuth.js (v5)

NextAuth tetap menjadi pilihan populer untuk otentikasi server‑side.

# Install NextAuth dan adapter Prisma (opsional)
npm install next-auth @next-auth/prisma-adapter prisma
# Inisialisasi Prisma schema
npx prisma init

Konfigurasi app/api/auth/[...nextauth]/route.ts:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
export const auth = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!
    })
  ],
  callbacks: {
    async session({ session }) {
      return session;
    }
  }
});

Jangan lupa menambahkan .env dengan GITHUB_ID dan GITHUB_SECRET serta NEXTAUTH_URL=http://localhost:3000.

6. Optimasi Performance & SEO

Image Optimization: Ganti next/image dengan next/future/image (experimental) untuk format AVIF/WebP otomatis.
Static Generation: Gunakan export const revalidate = 60; pada halaman yang membutuhkan ISR.
Header Meta: Manfaatkan metadata di layout untuk og: dan twitter: tags.

7. Menyiapkan CI/CD dengan GitHub Actions

Buat file .github/workflows/deploy.yml:

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build:
    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 --if-present
      - name: Deploy
        uses: vercel/action@v2
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          github-token: ${{ secrets.GITHUB_TOKEN }}

Tambahkan secret yang dibutuhkan di Settings > Secrets of repository.

8. Deploy ke Vercel

Login ke Vercel menggunakan GitHub.
Import repository my-next14-app.
Vercel otomatis mendeteksi next build dan menerapkan variabel lingkungan dari .env.local (atau via dashboard).
Set Framework Preset ke Next.js, pastikan App Router tercentang.
Deploy selesai, URL https://my-next14-app.vercel.app aktif dalam hitungan detik.

9. Best Practice

Type Safety: Selalu gunakan TypeScript; manfaatkan type Route = keyof typeof AppRouter untuk route‑type checking.
Folder Convention: Simpan komponen UI di components/ui dan gunakan export const metadata per halaman untuk SEO otomatis.
Environment Management: Simpan semua secret di Vercel → Settings → Environment Variables, hindari .env di repo.
Linting & Formatting: Tambahkan ESLint + Prettier via npm i -D eslint prettier eslint-config-prettier dan konfigurasi .eslintrc.js untuk menjaga konsistensi kode.
Testing: Gunakan jest + @testing-library/react untuk unit test, dan cypress untuk e2e.

10. Troubleshooting Umum

Masalah	Solusi
Tailwind tidak menghasilkan CSS	Pastikan path di `tailwind.config.js` mencakup folder `app`. Jalankan `npm run dev` kembali.
Deploy gagal karena `BUILD_COMMAND not found`	Pastikan script `build` ada di `package.json`: `"build": "next build"`.
NextAuth error "Missing client secret"	Periksa .env di Vercel, pastikan `GITHUB_ID` dan `GITHUB_SECRET` terisi.

11. Kesimpulan

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki aplikasi Next.js 14 modern, teroptimasi, dan siap produksi dalam hitungan menit. Kombinasi App Router, Tailwind CSS, dan CI/CD berbasis GitHub Actions memberikan alur kerja yang cepat, skalabel, dan mudah dipelihara untuk tim pengembangan apa pun.

Next.js 14 telah menyediakan fondasi yang kuat untuk aplikasi React full‑stack. Mengintegrasikan Tailwind CSS, otentikasi NextAuth, serta pipeline GitHub Actions‑Vercel menyederhanakan proses pengembangan hingga deployment. Terapkan best practice yang disebutkan untuk menjaga kualitas kode, keamanan, dan performa—dan Anda siap bersaing dalam ekosistem Web Development 2026.

Panduan terperinci langkah demi langkah setup Next.js 14 dengan App Router, Tailwind CSS, otentikasi NextAuth, CI/CD GitHub Actions, dan deployment ke Vercel. Cocok untuk developer Programming, Software Engineering, dan Web Development.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma