Source: Dev.to

PortfolioForge：使用 Next.js、Firebase 与 Genkit 构建 AI 原生作品集平台

简介

在当今竞争激烈的就业市场中，拥有一个能够展示你技能、项目和个人品牌的作品集网站已经成为必备。传统的作品集往往是静态的、需要手动更新的页面，而 PortfolioForge 旨在通过 AI 自动化内容生成、实时数据同步以及可扩展的后端服务，为开发者提供一个 AI 原生 的作品集平台。

本文将带你一步步了解：

• 为什么选择 AI 原生 的架构
• 项目所使用的技术栈（Next.js、Firebase、Genkit 等）
• 关键实现细节与代码示例
• 部署与持续集成的最佳实践

注：文中所有代码块保持原样，未作翻译。

---

为什么要构建 AI 原生作品集？

1. 内容生成自动化
   利用大语言模型（LLM）自动撰写项目描述、技术栈说明以及个人简介，省去手动编写的时间。

2. 实时更新
   当你在 GitHub、GitLab 或其他代码托管平台上新增或更新项目时，系统能够自动抓取最新信息并同步到作品集页面。

3. 个性化推荐
   基于访客的行为数据（浏览时间、点击路径），AI 可以动态调整展示顺序，提升转化率。

4. 可扩展性
   通过 Serverless 架构和云函数，平台可以轻松应对流量峰值，而无需自行管理服务器。

---

技术栈概览

---

项目结构

portfolioforge/
├─ app/                # Next.js 13+ App Router
│  ├─ page.tsx
│  ├─ layout.tsx
│  └─ api/
│     └─ generate/     # 与 Genkit 交互的 API 路由
├─ components/         # 可复用 UI 组件
├─ lib/
│  ├─ firebase.ts      # Firebase 初始化
│  └─ genkit.ts        # Genkit 客户端封装
├─ public/
├─ styles/
├─ .firebaserc
├─ firebase.json
├─ next.config.js
└─ package.json

---

初始化 Firebase

在 lib/firebase.ts 中完成 Firebase SDK 的初始化。请确保已在 Firebase 控制台创建项目并获取相应的配置。

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

安全提示：所有敏感信息均通过 .env.local 注入，切勿直接写入代码仓库。

---

使用 Genkit 进行内容生成

1. 安装依赖

npm install @genkit-ai/core @genkit-ai/llm @genkit-ai/firebase

2. 创建 Genkit 客户端

lib/genkit.ts

import { createGenkit } from "@genkit-ai/core";
import { firebase } from "@genkit-ai/firebase";
import { openai } from "@genkit-ai/llm/openai";

export const genkit = createGenkit({
  plugins: [
    firebase({ projectId: process.env.FIREBASE_PROJECT_ID! }),
    openai({ apiKey: process.env.OPENAI_API_KEY! })
  ],
});

3. 定义 Prompt

import { definePrompt } from "@genkit-ai/core";

export const projectDescriptionPrompt = definePrompt({
  name: "projectDescription",
  inputSchema: {
    type: "object",
    properties: {
      title: { type: "string" },
      techStack: { type: "string" },
      repoUrl: { type: "string" },
    },
    required: ["title", "techStack", "repoUrl"],
  },
  template: `
请为以下项目撰写一段约 150 字的中文简介，突出技术亮点和业务价值。
项目标题：{{title}}
技术栈：{{techStack}}
仓库链接：{{repoUrl}}
`,
});

4. 在 API 路由中调用

app/api/generate/route.ts

import { NextResponse } from "next/server";
import { genkit } from "@/lib/genkit";
import { projectDescriptionPrompt } from "@/lib/prompts";

export async function POST(request: Request) {
  const { title, techStack, repoUrl } = await request.json();

  const result = await genkit.runPrompt(projectDescriptionPrompt, {
    title,
    techStack,
    repoUrl,
  });

  return NextResponse.json({ description: result.output });
}

---

从 GitHub 自动抓取项目数据

利用 GitHub GraphQL API 获取仓库的 README、star、fork 等信息，并存入 Firestore。

import { gql, GraphQLClient } from "graphql-request";

const client = new GraphQLClient("https://api.github.com/graphql", {
  headers: {
    Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
  },
});

export async function fetchRepoData(owner: string, name: string) {
  const query = gql`
    query($owner: String!, $name: String!) {
      repository(owner: $owner, name: $name) {
        name
        description
        stargazerCount
        forkCount
        url
        readme: object(expression: "HEAD:README.md") {
          ... on Blob {
            text
          }
        }
      }
    }
  `;

  const data = await client.request(query, { owner, name });
  return data.repository;
}

在 CI（GitHub Actions）中运行该脚本，将最新的仓库信息写入 Firestore，实现 实时同步。

---

页面渲染：使用 ISR（增量静态再生成）

// app/page.tsx
import { collection, getDocs } from "firebase/firestore";
import { db } from "@/lib/firebase";

export const revalidate = 60; // 每 60 秒重新生成

export default async function Home() {
  const snapshot = await getDocs(collection(db, "projects"));
  const projects = snapshot.docs.map((doc) => doc.data());

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-4xl font-bold mb-8">我的作品集</h1>
      <div className="grid gap-6 md:grid-cols-2">
        {projects.map((proj) => (
          <ProjectCard key={proj.id} project={proj} />
        ))}
      </div>
    </main>
  );
}

通过 revalidate，页面在用户访问时会检查是否需要重新生成，从而兼顾 性能 与 数据新鲜度。

---

部署到 Vercel（可选）

1. 在 Vercel Dashboard 中创建新项目，连接 GitHub 仓库。
2. 在 Environment Variables 中添加所有 .env 变量（Firebase、OpenAI、GitHub Token 等）。
3. Vercel 会自动检测 next.config.js 并使用 Zero‑Config 部署。

如果你更倾向于使用 Firebase Hosting：

npm run build
firebase deploy --only hosting

---

CI/CD：GitHub Actions 示例

.github/workflows/deploy.yml

name: Deploy PortfolioForge

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Run lint & tests
        run: npm run lint && npm test

      - name: Build
        run: npm run build

      - name: Deploy to Firebase
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: |
          npm install -g firebase-tools
          firebase deploy --only hosting --token $FIREBASE_TOKEN

此工作流在每次推送到 main 分支时自动：

• 安装依赖
• 运行 Lint 与单元测试
• 构建项目
• 使用 Firebase Token 将最新的静态文件部署到 Firebase Hosting

---

结语

PortfolioForge 展示了如何将 Next.js 的强大渲染能力、Firebase 的实时后端以及 Genkit 的 AI 工作流相结合，打造一个真正 AI 原生 的作品集平台。通过自动化内容生成、实时数据同步以及智能推荐，你可以把更多时间投入到实际项目开发，而不是维护网页。

如果你对项目感兴趣，欢迎：

• ⭐️ 给文章点星
• 在 GitHub 上 Fork 本仓库并提交 PR
• 在评论区分享你的使用体验或改进想法

祝你构建出令人惊艳的个人作品集！ 🚀

🚀 问题：作品集创建太困难

即使是技术娴熟的专业人士也会在以下至少一项上感到困难：

• Design — 让作品在视觉上更具吸引力
• Development — 构建并部署网站
• Storytelling — 撰写引人入胜的项目概述
• Time — 收集作品并进行排版

作品集至关重要，但整个过程往往令人痛苦。

PortfolioForge 通过充当您职业形象的 co‑pilot，彻底改变了这一体验。

🤖 解决方案：AI 驱动的作品集副驾驶

PortfolioForge 使用三大核心功能自动化作品集创建中最困难的部分。

1. 多模态数据摄取

用户可以上传或链接几乎任何内容：

• PDF 或基于图像的简历
• 原始 LinkedIn 个人资料文本
• 公共 GitHub 仓库
• 任意公开 URL（博客、项目页面、案例研究）

系统会自动解析、结构化并提取有意义的数据。

2. AI 生成内容与摘要

使用 Google Genkit，平台可以：

• 生成标题和摘要
• 重写或润色描述
• 概括长篇内容
• 将 GitHub 仓库转化为精致的作品集条目

这就像拥有一个懂你工作的编辑。

3. 生成式主题设计

不再使用僵硬的模板，用户只需描述一个主题，例如：

• “宁静的海风”
• “未来感的霓虹美学”
• “温暖的泥土色调配以极简排版”

系统会即时生成独特的配色方案和视觉标识。

🏗️ 技术架构

PortfolioForge 使用现代、可扩展且安全的技术栈构建，面向真实生产环境。

前端：Next.js 14（App Router）

• 服务器端渲染以提升性能
• 开箱即用的强大 SEO
• 流畅的路由和数据获取
• 为构建现代 Web 应用提供卓越的开发者体验

UI 完全组件化，并针对快速渲染进行优化。

后端：Firebase（无服务器架构）

Firebase 为整个后端提供动力：

• Firestore — 基于严格的用户所有权安全规则的 NoSQL 数据库
• Firebase Authentication — 支持 Google、Apple 以及匿名登录
• Firebase Hosting — 全球 CDN、自动弹性伸缩、零维护
• Firebase App Check — 防止未授权客户端访问后端

该方案消除了服务器管理负担，并实现自动扩展。

AI 引擎：Google Genkit

Genkit 负责所有生成式功能：

• 内容生成
• 摘要生成
• 主题创建
• 叙事润色

关键架构决策： AI 模型通过 Firebase Remote Config 动态管理，能够在不重新部署应用的情况下切换模型（例如 gemini‑1.5‑flash），从而使系统具备面向未来的可扩展性。

🔐 安全性与生产就绪

PortfolioForge 不是原型——它面向生产环境设计。

• 基于环境的凭证管理
• 细粒度的 Firestore 与 Storage 安全规则
• CI/CD 流水线，实现一致的部署
• 结构化日志记录
• Core Web Vitals 监控
• 完整的生产审计，确保安全性和可扩展性

所有功能均以真实世界的可靠性为目标构建。

🌍 对开发者生态系统的影响

PortfolioForge 以三种方式为数字技术社区做出贡献：

1. 赋能专业人士

任何人都可以创建精致的作品集，而无需：

• 设计技能
• Web 开发专长
• 大量手动排版时间

2. 开源学习资源

代码库展示了：

• 如何构建 AI 原生应用
• Firebase 安全的最佳实践
• 实际的 Genkit 集成
• 可扩展的 Next.js 14 模式

3. 将 AI 推向聊天机器人之外

PortfolioForge 展示了如何将 AI 深度嵌入产品，以解决实际的、以用户为中心的问题。

🎯 Final Thoughts

PortfolioForge 代表了对职业身份未来的愿景：智能、自动化且精美个性化。

作为唯一的架构师和开发者，我构建了这个平台，以突破 AI 原生应用的边界——将工程、设计和生成式智能融合为一个统一的产品。

而这仅仅是个开始。