KMT Talks 前端程式碼

專案重點

• 框架：Next.js（App Router, TypeScript）
• 樣式：Tailwind CSS
• 套件管理：pnpm
• 目標平台：適合部署到 Vercel 或 Cloudflare Workers（專案包含 wrangler.toml）

開始（本機開發）

在啟動開發伺服器之前，請建立 .env.local 並加入必要的環境變數，例如：

NEXT_PUBLIC_API_HOST=https://example.com/
OG_SECRET_KEY=your-secret-key-here

• NEXT_PUBLIC_API_HOST 是後端 API host。
• OG_SECRET_KEY 是用於產生 ogimage 的金鑰，需與後端使用的金鑰相同。

# 安裝相依（使用 pnpm）
pnpm install

# 啟動開發伺服器
pnpm dev

開啟瀏覽器並前往 http://localhost:3000，即可看到網站。主要頁面與路由位於 app/ 目錄。

專案結構（重點）

• app/ — Next.js App Router 的頁面與佈局
  • app/layout.tsx、子資料夾如 dashboard/, about/ 等
• components/ — 可重用的 React 元件
• hooks/ — 自訂 hooks（例如 useAPI.ts, useJWT.ts）
• lib/ — 工具函式與 og 圖片相關程式
• public/ — 靜態資源
• worker.ts, wrangler.toml — Cloudflare Worker 相關

環境變數與部署

• 若要在本機或 CI 中設定環境變數，請建立 .env.local（不要提交到版本控制）。
• 推薦部署到 Vercel（與 Next.js 相容）或 Cloudflare（若要使用 worker.ts）。

建議在 .env.local 中加入以下範例變數（請勿提交到版本控制）：

NEXT_PUBLIC_API_HOST=https://example.com/
OG_SECRET_KEY=your-secret-key-here

• NEXT_PUBLIC_API_HOST 是後端 API host。
• OG_SECRET_KEY 是用於產生 ogimage 的金鑰，需與後端使用的金鑰相同。

參考資源

• Next.js: https://nextjs.org/
• Tailwind CSS: https://tailwindcss.com/
• pnpm: https://pnpm.io/