Panduan Lengkap Setup Next.js 14 dengan App Router, TypeScript, dan Integrasi OpenAI API

Pelajari cara menginstal, mengonfigurasi, dan mengembangkan aplikasi web modern menggunakan Next.js 14, TypeScript, dan OpenAI API—dengan contoh kode yang siap pakai, best practice, serta tips debugging.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js 20.x atau lebih baru dan npm 10.x terpasang. Verifikasi dengan:

node -v
npm -v

Jika belum, unduh dari nodejs.org. Disarankan juga mengaktifkan corepack untuk mengelola paket Yarn/PNPM secara konsisten:

corepack enable

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app dengan flag --ts untuk TypeScript dan --app untuk App Router:

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

Masuk ke folder proyek:

cd my-next14-app

3. Instalasi Dependensi Tambahan

openai: SDK resmi untuk berinteraksi dengan OpenAI API.
dotenv: Membaca variabel lingkungan dari file .env.local.
eslint & prettier: Linting & formatting standar.

npm install openai dotenv
npm i -D eslint prettier eslint-config-prettier eslint-plugin-react

4. Konfigurasi Variabel Lingkungan

Buat file .env.local di root proyek dan tambahkan kredensial OpenAI Anda (dapatkan dari OpenAI Dashboard).

OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXX

Pastikan file ini tidak di‑commit dengan menambahkan ke .gitignore.

5. Menyiapkan OpenAI Client Wrapper

Buat folder lib dan file openaiClient.ts:

import { OpenAI } from "openai";
import dotenv from "dotenv";

dotenv.config();

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export default openai;

Wrapper ini memungkinkan reuse di seluruh API route.

6. Membuat API Route dengan App Router

Next.js 14 App Router menggantikan pages/api. Buat folder app/api/chat/route.ts:

import { NextResponse } from "next/server";
import openai from "@/lib/openaiClient";

type RequestBody = {
  messages: { role: string; content: string }[];
};

export async function POST(request: Request) {
  const { messages } = (await request.json()) as RequestBody;
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages,
      temperature: 0.7,
    });
    return NextResponse.json(completion);
  } catch (error) {
    console.error("OpenAI error:", error);
    return NextResponse.json({ error: "Failed to fetch response" }, { status: 500 });
  }
}

Endpoint ini menerima array pesan dan mengembalikan respons ChatGPT.

7. Membuat UI Chat dengan React Server Components

Di folder app, buat file page.tsx sebagai halaman utama:

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

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

  const sendMessage = async () => {
    if (!input.trim()) return;
    const userMsg = { role: "user", content: input };
    const updated = [...messages, userMsg];
    setMessages(updated);
    setLoading(true);
    setInput("");
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ messages: updated }),
      });
      const data = await res.json();
      const assistantMsg = { role: "assistant", content: data.choices?.[0]?.message?.content || "" };
      setMessages([...updated, assistantMsg]);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  return (
    
      Next.js 14 AI Chat Demo
      
        {messages.map((msg, i) => (
          
            {msg.role}: {msg.content}
          
        ))}
        {loading && Menunggu respons AI…}
      
      
         setInput(e.target.value)}
          placeholder="Ketik pertanyaan…"
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
        />
        
      
    
  );
}

Catatan: karena UI menggunakan "use client", komponen ini di‑render di browser, sementara API route tetap di server.

8. Menambahkan Styling dengan Tailwind CSS

Instal Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update tailwind.config.js:

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

Tambahkan direktif Tailwind ke app/globals.css:

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

Setelah itu, jalankan npm run dev dan UI otomatis berubah.

9. Best Practice untuk Keamanan & Performance

Rate limiting: gunakan middleware next-rate-limit atau Cloudflare Workers untuk melindungi endpoint API dari penyalahgunaan.
Validasi input: pastikan messages tidak melebihi 10 KB per request; buang konten yang mengandung prompt injection.
Cache respons: untuk pertanyaan statis, simpan hasil di Redis (lihat contoh ioredis di docs).
Env management: gunakan vercel env atau dotenv-cli dalam CI/CD untuk menjaga rahasia tetap aman.
Server‑side rendering (SSR) hanya bila perlu; UI chat tetap client‑side untuk mengurangi beban server.

10. Deploy ke Vercel (One‑Click)

Push repository ke GitHub.
Buka Vercel dashboard, pilih repo, dan biarkan Vercel mendeteksi next.config.js secara otomatis.
Tambahkan environment variable OPENAI_API_KEY pada Settings → Environment Variables.
Deploy! Vercel akan menghasilkan URL https://my-next14-app.vercel.app/.

11. Debugging & Monitoring

Gunakan next dev dengan flag --turbo untuk hot‑reload cepat. Untuk produksi, integrasikan Sentry dengan SDK @sentry/nextjs sehingga error di API route tercatat dengan trace lengkap.

12. Penutup & Langkah Selanjutnya

Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, TypeScript, Tailwind, dan OpenAI API. Eksplorasi fitur lanjutan seperti streaming response (response.body), RSC (React Server Components) untuk rendering dinamis, atau menambahkan vector store (Weaviate, Pinecone) untuk pencarian semantik.

Dengan mengikuti tutorial ini, Anda tidak hanya menguasai setup Next.js 14 yang modern, tetapi juga memahami cara mengintegrasikan layanan AI secara aman dan skalabel. Terapkan best practice keamanan, gunakan CI/CD, dan manfaatkan ekosistem Vercel untuk mempercepat time‑to‑market. Selamat ber‑coding, dan jadikan AI bagian dari produk web Anda!

Panduan step‑by‑step setup Next.js 14 dengan TypeScript, Tailwind, dan integrasi OpenAI API. Termasuk instalasi, konfigurasi, contoh kode, best practice keamanan, dan deploy ke Vercel.

Programming,Software Engineering,Web Development,Next.js 14,OpenAI API,TypeScript,Tailwind CSS

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma