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

Pelajari cara membangun aplikasi web modern dengan Next.js 14, mengaktifkan App Router, menambahkan TypeScript, mengintegrasikan OpenAI API, dan menerapkan best practice untuk keamanan serta performa.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js terbaru (v20.10+) dan npm atau pnpm yang terinstal. Verifikasi dengan:

node -v
npm -v   # atau pnpm -v

Jika belum terpasang, unduh dari nodejs.org.

2. Membuat Proyek Next.js 14

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

Parameter --ts menyiapkan TypeScript secara otomatis, sedangkan --experimental-app mengaktifkan struktur app/ (App Router) yang menjadi standar sejak Next.js 14.

2.1 Struktur Direktori Baru

Setelah selesai, periksa struktur utama:

my-next14-app/
├─ app/                # App Router entry point
│  ├─ layout.tsx       # Global layout
│  ├─ page.tsx         # Home page
│  └─ api/
│     └─ chat/route.ts # API Route contoh
├─ public/
├─ src/
│  └─ styles/
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Mengkonfigurasi TypeScript & ESLint

Next.js 14 sudah menyiapkan tsconfig.json. Tambahkan beberapa opsi untuk stricter type checking:

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Instal ESLint dengan config Next.js:

pnpm add -D eslint@latest eslint-config-next@latest

Tambahkan file .eslintrc.json:

{
  "extends": ["next", "next/core-web-vitals"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "react/react-in-jsx-scope": "off"
  }
}

4. Menambahkan OpenAI API

4.1 Membuat Akun dan API Key

Kunjungi OpenAI Platform, buat API key, dan simpan dengan aman.

4.2 Instalasi SDK

pnpm add openai@4.28.0

Versi 4.x mendukung streaming dan token usage yang lebih efisien pada 2026.

4.3 Menyimpan Rahasia dengan env.local

# .env.local
NEXT_PUBLIC_OPENAI_MODEL=gpt-4o-mini
OPENAI_API_KEY=sk-***********************

Pastikan .env.local ditambahkan ke .gitignore.

4.4 Membuat API Route untuk Chat

// app/api/chat/route.ts
import { OpenAI } from "openai";
import { NextResponse } from "next/server";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  dangerouslyAllowBrowser: false // only server side
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const completion = await openai.chat.completions.create({
    model: process.env.NEXT_PUBLIC_OPENAI_MODEL,
    messages,
    temperature: 0.7,
    max_tokens: 1024,
    stream: false
  });
  return NextResponse.json(completion);
}

Endpoint ini menerima array messages seperti format OpenAI Chat API.

5. Membuat UI Chat dengan React Server Components

// app/page.tsx
"use client";
import { useState } from "react";

export default function Home() {
  const [input, setInput] = useState("");
  const [conversation, setConversation] = useState>([]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim()) return;
    const userMsg = { role: "user", content: input };
    const updated = [...conversation, userMsg];
    setConversation(updated);
    setLoading(true);
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages: updated })
    });
    const data = await res.json();
    const botMsg = data.choices[0].message;
    setConversation([...updated, botMsg]);
    setInput("");
    setLoading(false);
  };

  return (
    

      
Next.js 14 + OpenAI Chat
      

        {conversation.map((msg, i) => (
          

            {msg.role}: {msg.content}
          
        ))}
        {loading && 
Thinking...
}
      
      

         setInput(e.target.value)}
          placeholder="Ask something..."
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
        />
        
      
    
  );
}

Catatan: "use client" diperlukan karena komponen ini menggunakan state.

6. Optimasi Performansi & SEO

• Image Optimization: gunakan next/image untuk semua gambar statis.
• Incremental Static Regeneration (ISR): jika ada halaman yang tidak berubah tiap request, tambahkan revalidate pada generateStaticParams.
• Cache Header pada API: tambahkan Cache-Control: no-store pada route chat untuk mencegah caching respons AI.
• React Server Components (RSC): pindahkan layout dan static UI ke server‑side untuk mengurangi bundle size.

7. Keamanan

1. Jangan pernah mengekspos OPENAI_API_KEY ke browser. Pastikan semua pemanggilan API berada di route server.
2. Gunakan rate limiting (mis. express-rate-limit melalui middleware) bila aplikasi publik.
3. Validasi dan sanitasi input pengguna sebelum mengirim ke OpenAI untuk menghindari prompt injection.

8. Deploy ke Vercel (Free Tier)

git init
git add .
git commit -m "Initial Next.js 14 with OpenAI"
vercel login
vercel

Vercel otomatis mendeteksi app/ router dan meng‑set environment variables melalui dashboard.

9. CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm build

Pipeline ini memastikan kode selalu linted, ter‑test, dan dapat dibuild sebelum merge.

10. Best Practice Tambahan

• Monorepo (optional): bila Anda memiliki banyak paket (frontend, backend, shared utils) gunakan TurboRepo untuk caching build.
• Feature Flags: gunakan next/config atau layanan seperti LaunchDarkly untuk mengaktifkan/menonaktifkan AI fitur secara dinamis.
• Observability: integrasikan @vercel/analytics atau OpenTelemetry untuk tracing request ke OpenAI.

Dengan mengikuti langkah-langkah di atas, Anda dapat menyiapkan aplikasi Next.js 14 yang modern, ter‑type‑safe, terintegrasi dengan OpenAI, dan siap di‑deploy ke Vercel. Implementasi best practice keamanan, performa, dan CI/CD memastikan kode Anda production‑ready dan mudah dipelihara. Selamat bereksperimen dan tingkatkan aplikasi Anda dengan fitur AI yang lebih canggih di masa depan!

---

Tutorial lengkap setup Next.js 14 dengan App Router, TypeScript, dan OpenAI API. Langkah demi langkah, contoh kode, best practice keamanan, performa, dan CI/CD.

Programming,Software Engineering,Web Development,Next.js 14,OpenAI,TypeScript,AI Integration

#Programming #SoftwareEngineering #WebDev #Tech #Coding