Panduan Lengkap Setup Next.js 14 dengan App Router dan Integrasi OpenAI API di 2026

Muhammad Akil Mei 10, 2026


Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini menjelaskan langkah‑langkah instalasi, konfigurasi, contoh kode, serta best practice untuk menghubungkan aplikasi Anda dengan OpenAI API, sehingga Anda dapat menambahkan fitur AI seperti chat, summarization, atau code generation secara real‑time.

1. Prasyarat & Persiapan Lingkungan

Sebelum memulai, pastikan Anda telah menginstal versi terbaru Node.js (v20.10 atau lebih tinggi) dan npm (v10.x). Anda juga membutuhkan akun OpenAI dengan API key aktif. Jika belum memiliki, daftar di OpenAI Platform.

1.1. Instalasi Node.js & npm

# Untuk macOS/Linux dengan Homebrew
brew install node@20
# Windows dengan Chocolatey
choco install nodejs-lts

1.2. Verifikasi Instalasi

node -v   # → v20.10.0
npm -v    # → 10.2.0

2. Membuat Proyek Next.js 14 Baru

Next.js 14 memperkenalkan App Router secara default. Gunakan perintah berikut untuk memulai proyek tanpa konfigurasi tambahan.

npx create-next-app@latest my-next-ai-app --experimental-app-dir

Perintah di atas akan menghasilkan struktur folder seperti:

my-next-ai-app/
├─ app/               # App Router
├─ public/
├─ next.config.mjs
├─ package.json
└─ ...

2.1. Memasuki Direktori Proyek

cd my-next-ai-app

2.2. Menjalankan Server Development

npm run dev

Buka http://localhost:3000—Anda akan melihat halaman welcome default Next.js.

3. Menambahkan TypeScript (Opsional tapi Direkomendasikan)

TypeScript meningkatkan keamanan kode terutama saat berinteraksi dengan API eksternal.

npm install -D typescript @types/react @types/node
npx tsc --init

Setelah itu, rename file .js di dalam folder app menjadi .tsx dan .ts untuk utility.

4. Instalasi Dependency OpenAI SDK

OpenAI merilis SDK resmi untuk JavaScript/Node v4 yang mendukung streaming dan fungsi fungsi.

npm install openai

4.1. Membuat File konfigurasi API

Buat file lib/openai.ts (atau .ts bila menggunakan TypeScript).

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  // Pada 2026, OpenAI menambahkan header baru untuk traceability
  defaultHeaders: { "OpenAI-Trace-Id": crypto.randomUUID() }
});

export default openai;

5. Menyiapkan Environment Variables

Next.js 14 membaca variabel dari file .env.local pada root proyek.

# .env.local
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Pastikan file ini tidak di‑commit ke repo (default sudah ditambahkan ke .gitignore).

6. Membuat API Route untuk OpenAI

Dengan App Router, API route ditempatkan di app/api/. Kita buat endpoint /api/chat yang menerima pesan dan mengembalikan respons streaming.

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  if (!messages || !Array.isArray(messages)) {
    return NextResponse.json({ error: "Invalid payload" }, { status: 400 });
  }

  const stream = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages,
    stream: true,
  });

  // Next.js 14 streaming response (Server Sent Events)
  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async pull(controller) {
      for await (const chunk of stream) {
        const content = chunk.choices[0]?.delta?.content || "";
        controller.enqueue(encoder.encode(content));
      }
      controller.close();
    }
  });

  return new NextResponse(readable, {
    headers: { "Content-Type": "text/event-stream" }
  });
}

6.1. Penjelasan Singkat

  • POST menerima JSON dengan properti messages (format OpenAI chat).
  • Kita memanggil openai.chat.completions.create dengan stream: true untuk mendapatkan data secara real‑time.
  • Response dibungkus dalam ReadableStream sehingga frontend dapat menampilkan teks seiring kedatangan.

7. Membuat UI Chat di Frontend

Tambahkan halaman chat di app/chat/page.tsx.

"use client";
import { useState, useRef } from "react";

export default function ChatPage() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const eventSourceRef = useRef<EventSource | null>(null);

  const sendMessage = async () => {
    if (!input.trim()) return;
    const userMsg = { role: "user", content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput("");

    // Append user message ke payload
    const payload = { messages: [...messages, userMsg] };

    // Menggunakan EventSource untuk SSE
    eventSourceRef.current?.close();
    eventSourceRef.current = new EventSource("/api/chat", { 
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    let assistantContent = "";
    eventSourceRef.current.onmessage = (e) => {
      assistantContent += e.data;
      setMessages(prev => {
        const withoutAssistant = prev.filter(m => m.role !== "assistant");
        return [...withoutAssistant, { role: "assistant", content: assistantContent }];
      });
    };

    eventSourceRef.current.onerror = () => {
      eventSourceRef.current?.close();
    };
  };

  return (
    

      
AI Chat dengan OpenAI & Next.js 14

      

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

            {msg.role}: {msg.content}
          

        ))}
      

      

         setInput(e.target.value)}
          className="flex-1 border rounded p-2"
          placeholder="Ketik pesan..."
        />
        
      

    

  );
}

7.1. Catatan Implementasi

  • Komponen ditandai dengan "use client" karena menggunakan state dan EventSource.
  • Next.js 14 tidak mendukung fetch streaming pada client-side secara native; SSE via EventSource tetap bekerja di semua browser modern.
  • Best practice: batasi panjang messages menjadi 20 entri untuk menghindari payload terlalu besar.

8. Optimasi & Best Practice

8.1. Rate Limiting & Caching

Gunakan middleware di middleware.ts untuk membatasi 60 permintaan per menit per IP dan cache hasil dengan NextResponse.revalidate bila percakapan tidak sensitif.

8.2. Security

  • Jangan kirim OPENAI_API_KEY ke client. Semua panggilan harus melalui API route.
  • Gunakan Content‑Security‑Policy header untuk mencegah injection.
  • Validasi dan sanitasi semua input pengguna sebelum menambahkannya ke payload.

8.3. Performance

  • Aktifkan runtime: "edge" pada API route bila Anda menggunakan Vercel Edge Functions untuk latency ultra‑rendah.
  • Gunakan next/image untuk mengoptimalkan gambar statis pada UI.

9. Deploy ke Vercel (Free Tier)

# Pastikan git sudah terinisialisasi
git init
git add .
git commit -m "Initial commit"
# Push ke repository GitHub
git remote add origin https://github.com/username/my-next-ai-app.git
git push -u origin main
# Pada dashboard Vercel, pilih "New Project" -> import repo -> set Build Command: npm run build, Output Directory: .next
# Tambahkan environment variable OPENAI_API_KEY pada Settings > Environment Variables

Setelah deploy, aplikasi tersedia pada https://my-next-ai-app.vercel.app dengan latency biasanya < 100 ms untuk respon AI (tergantung beban OpenAI).

10. Studi Kasus: Menambahkan Fitur Summarization Dokumen

Misalkan tim produk ingin menambahkan tombol "Ringkas" di atas teks artikel. Implementasinya hanya memanggil API yang sama dengan prompt khusus.

// app/api/summarize/route.ts
import { NextResponse } from "next/server";
import openai from "@/lib/openai";

export async function POST(req: Request) {
  const { content } = await req.json();
  if (!content) return NextResponse.json({ error: "No content" }, { status: 400 });

  const completion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [{ role: "system", content: "You are a concise summarizer." }, { role: "user", content }],
    max_tokens: 150,
  });

  const summary = completion.choices[0].message.content.trim();
  return NextResponse.json({ summary });
}

Di UI, panggil endpoint ini dengan fetch biasa dan tampilkan summary dalam modal.

11. Trouble‑shooting Umum

  • 500 Internal Server Error: Pastikan OPENAI_API_KEY ter‑set di environment dan tidak berisi spasi.
  • Rate limit 429: Tambahkan exponential backoff di client atau upgrade akun OpenAI.
  • SSE tidak muncul di Chrome: Pastikan header Cache-Control: no-store dikirim; tambahkan di API route jika perlu.

Dengan mengikuti langkah‑langkah di atas, Anda sudah memiliki aplikasi Next.js 14 yang menggunakan App Router, streaming SSE, dan terintegrasi dengan OpenAI API. Tutorial mencakup instalasi, konfigurasi environment, pembuatan API route, UI React modern, serta best practice keamanan dan performa. Selanjutnya, Anda dapat memperluas fitur AI—seperti summarization, code generation, atau image generation—sesuai kebutuhan produk, sekaligus memanfaatkan kemampuan edge runtime Vercel untuk latency ultra‑rendah.
Panduan lengkap setup Next.js 14 dengan App Router, integrasi OpenAI API, dan contoh kode chat AI real‑time. Termasuk best practice, deployment Vercel, dan studi kasus summarization.

Programming,Software Engineering,Web Development

#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