Panduan Integrasi Next.js & TypeScript

1. Konfigurasi .env.local di Proyek Next.js

Simpan kunci API tanpa prefix NEXT_PUBLIC_ agar kunci hanya dapat dibaca di lingkungan server Node.js:

# .env.local
TOKENFAJRI_API_KEY="sk-tok-xxxxxxxxxxxxxxxxxxxxxxxx"
TOKENFAJRI_BASE_URL="https://token.fajriag.ai.id/v1"

2. Menggunakan SDK Resmi openai di Route Handler

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

const gateway = new OpenAI({
  apiKey: process.env.TOKENFAJRI_API_KEY,
  baseURL: process.env.TOKENFAJRI_BASE_URL || "https://token.fajriag.ai.id/v1",
});

export async function POST(req: NextRequest) {
  const { prompt } = await req.json();

  const completion = await gateway.chat.completions.create({
    model: "deepseek-v4.1-flash-1017",
    messages: [
      { role: "system", content: "Anda adalah asisten teknis aplikasi produksi." },
      { role: "user", content: String(prompt || "") },
    ],
    temperature: 0.3,
  });

  return NextResponse.json({
    reply: completion.choices[0]?.message?.content ?? "",
    usage: completion.usage,
  });
}

3. Integrasi Streaming dengan Vercel AI SDK (@ai-sdk/openai)

Jika Anda menggunakan hook useChat dari Vercel AI SDK, gunakan fungsi createOpenAI dengan opsi baseURL:

// npm install ai @ai-sdk/openai
// src/app/api/stream/route.ts
import { streamText } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const tokenFajri = createOpenAI({
  apiKey: process.env.TOKENFAJRI_API_KEY,
  baseURL: "https://token.fajriag.ai.id/v1",
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: tokenFajri.chat("deepseek-v4.1-flash-1017"),
    messages,
  });

  return result.toDataStreamResponse();
}