如何在個人專案中整合 AI 功能：OpenAI API＋Next.js＋Vercel

簡介：

• OpenAI：開發 ChatGPT 的公司。
• Next.js：基於 React 的框架，支持伺服器端渲染（SSR）和靜態生成（SSG），適合構建高性能的現代網頁應用。
• Vercel：一個部署和託管平台，專為前端框架（如 Next.js）設計，提供快速的全球部署和邊緣網絡支援。

準備階段

註冊 OpenAI 帳號並申請 API Key

自 2024 年 3 月起，OpenAI 已全面轉向預付款機制。用戶需要預先充值到 OpenAI 帳戶，每次 API 調用會從帳戶餘額中扣除。最低充值金額為 5 美元。

建立專案

• 新增 GitHub repo
• 透過 npx create-next-app 創建新專案

綁定 Vercel

• 註冊 Vercel 帳號
• 將 GitHub repo 導入

實作階段

API

• 安裝套件：npm install openai
• 在專案根目錄中新增檔案 .env.local ，並加入 OpenAI API key
• 實作 API

// .env.local
OPENAI_API_KEY=paste_your_api_key

// src/app/api/grammar/route.js
import OpenAI from "openai";

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

export async function POST(request) {
 try {
  const body = await request.json();
  const { sentence } = body;
  if (!sentence) {
   return new Response(JSON.stringify({ error: "sentence is required" }), {
    status: 400,
    headers: { "Content-Type": "application/json" },
   });
  }

  const response = await openai.chat.completions.create({
   model: "gpt-4o-mini",
   messages: [
    {
     role: "user",
     // 依個別專案需求，創建不同的提示詞（Prompt）
     content: `${sentence}\n\n請詳細解釋以上英文句子中的文法`,
    },
   ],
  });

  return new Response(
   JSON.stringify({ result: response.choices[0].message.content }),
   {
    status: 200,
    headers: { "Content-Type": "application/json" },
   }
  );
 } catch (error) {
  console.error(error);
  return new Response(JSON.stringify({ error: "Something went wrong" }), {
   status: 500,
   headers: { "Content-Type": "application/json" },
  });
 }
}

ps. 範例使用 Next.js App Route，如果偏好使用 page route，可參考 reference 中的連結

前端

• 依個別需求實作 UI 介面

"use client";
import { useState } from "react";
import styles from "./page.module.css";

export default function Home() {
 const [sentence, setSentence] = useState("");
 const [isLoading, setLoading] = useState(false);
 const [response, setResponse] = useState("");

 const handleSubmit = async (e) => {
  e.preventDefault();
  setLoading(true);
  setResponse("");

  try {
   const res = await fetch("/api/grammar", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ sentence }),
   });

   const data = await res.json();
   setResponse(data.result);
  } catch (error) {
   console.error(error);
  } finally {
   setLoading(false);
  }
 };

 return (
  <div className={styles.container}>
   <h1 className={styles.title}>英文文法解釋器</h1>
   <form onSubmit={handleSubmit}>
    <textarea
     className={styles.input}
     value={sentence}
     onChange={(e) => setSentence(e.target.value)}
     placeholder="貼入句子"
    />
    <button type="submit" className={styles.button} disabled={isLoading}>
     {isLoading ? "載入中..." : "送出"}
    </button>
   </form>
   {response && (
    <p className={styles.result}>
     {response.split("\n").map((text, idx) => (<div key={idx}>{text}</div>))}
    </p>
   )}
  </div>
 );
}

網站部署

• 在 Vercel 中，將 API key 設定成環境變數（Environment Variables）

• 將修改好的程式碼更新到 GitHub default branch（main or master）後，Vercel 就會自動進行部署。
• 當部署 Status 顯示為 Ready 時，點擊 Visit button 即可開啟網站。

補充：edge functions & region

Error: 403 Country, region, or territory not supported

使用 Vercel edge functions 可以提升 API 效能。由於 Vercel edge functions 離台灣最近的區域是香港，而 OpenAI 無法在香港使用，因此需要設定 regions 來避免錯誤。

App Route：

// src/app/api/grammar/route.js

// 使用 edge function
export const runtime = 'edge';
// 指定區域
const preferredRegion = ['iad1', 'hnd1']; ​

Page route：

export const config = {
	runtime: 'edge',
	regions: ['iad1', 'hnd1'],
};

可以設定的區域有：https://vercel.com/docs/edge-network/regions#region-list

Reference：

• 完整程式碼：https://github.com/Chang00Z/openai_nextjs_vercel
• OpenAI：https://platform.openai.com/docs/quickstart
• Next.js：https://nextjs.org/docs
• • App Route
  • Page Route
• Vercel functions & regions：https://vercel.com/docs/functions/configuring-functions/region