### 创建博客首页

修改 `src/app/blog/page.tsx` 为：

“`typescript
import Link from \’next/link\’;
import { getPosts } from \’@/lib/posts\’;

export default function BlogPage() {
const posts = getPosts();

return (

);
}
“`

### 创建博客文章页面

创建 `src/app/blog/[slug]/page.tsx`：

“`typescript
import { notFound } from \’next/navigation\’;
import { getPosts, getAllPostSlugs } from \’@/lib/posts\’;
import ReactMarkdown from \’react-markdown\’;

export function generateStaticParams() {
const posts = getAllPostSlugs();
return posts.map((slug) => ({
slug,
}));
}

export function generateMetadata({ params }: { params: { slug: string } }) {
const posts = getPosts();
const post = posts.find((p) => p.slug === params.slug);

if (!post) {
return {
title: \’文章未找到\’,
};
}

return {
title: `${post.title} | 我的博客`,
description: post.description,
};
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {
const posts = getPosts();
const post = posts.find((p) => p.slug === params.slug);

if (!post) {
notFound();
}

return (

);
}
“`

## 性能优化

### 使用 Next.js 14 的新特性

Next.js 14 引入了 Turbopack，这是一个新的 Rust 编译器，可以显著提高开发构建速度。在开发环境中，可以在 `next.config.js` 中启用 Turbopack：

“`javascript
/** @type {import(\’next\’).NextConfig} */
const nextConfig = {
experimental: {
turbopack: true,
},
};

export default nextConfig;
“`

### 图片优化

使用 Next.js 的 `next/image` 组件优化图片加载：

“`typescript
import Image from \’next/image\’;

function BlogPostPage({ params }) {
// …
return (

);
}
“`

### 添加面包屑导航

创建 `src/components/Breadcrumb.tsx`：

“`typescript
import Link from \’next/link\’;

export function Breadcrumb() {
return (

);
}
“`

然后在博客文章页面中使用：

“`typescript
import { Breadcrumb } from \’@/components/Breadcrumb\’;

// …
export default function BlogPostPage({ params }) {
// …
return (

);
}
“`

## 自动化部署到 Vercel

### 连接 GitHub 仓库

1. 在 GitHub 上创建一个新的仓库，并将本地代码推送到该仓库
2. 访问 [vercel.com](https://vercel.com) 并使用 GitHub 账户登录
3. 点击 \”New Project\” 并选择刚创建的仓库
4. Vercel 会自动检测到这是一个 Next.js 项目并显示配置选项

### 配置环境变量

如果博客需要环境变量（如 API 密钥、数据库连接等）：

1. 在 Vercel 项目设置中添加环境变量
2. 在本地 `.env.local` 文件中设置相同的变量（用于开发）

### 配置构建和预览命令

在 Vercel 项目设置中，确保构建命令是：

“`
npm run build
“`

输出目录是：

“`
.next
“`

### 配置自定义域名（可选）

如果需要使用自定义域名：

1. 在 Vercel 项目设置中添加自定义域名
2. 配置 DNS 记录（A 记录或 CNAME 记录）

### 设置自动部署

Vercel 默认会在每次推送到 GitHub 主分支时自动部署。可以配置：

– 部署环境：生产或预览
– 自动回滚：在检测到错误时自动回滚到之前的版本
– 部署钩子：在部署前后执行自定义脚本

## 添加更多功能

### 搜索功能

使用 `fuse.js` 实现简单的搜索：

“`bash
npm install fuse.js
“`

创建 `src/components/SearchBox.tsx`：

“`typescript
import { useState, useEffect } from \’react\’;
import Fuse from \’fuse.js\’;
import { getPosts } from \’@/lib/posts\’;

export function SearchBox() {
const [query, setQuery] = useState(\’\’);
const [results, setResults] = useState([]);

useEffect(() => {
const posts = getPosts();
const fuse = new Fuse(posts, {
keys: [\’title\’, \’description\’, \’content\’],
threshold: 0.3,
});

if (query.trim() !== \’\’) {
const searchResults = fuse.search(query);
setResults(searchResults.map((result) => result.item));
} else {
setResults([]);
}
}, [query]);

return (

);
}
“`

### 分页功能

如果文章数量很多，可以添加分页：

修改 `src/app/blog/page.tsx`：

“`typescript
import Link from \’next/link\’;
import { getPosts } from \’@/lib/posts\’;

const POSTS_PER_PAGE = 10;

export default function BlogPage({ searchParams }: { searchParams: { page?: string } }) {
const currentPage = parseInt(searchParams.page || \’1\’, 10);
const posts = getPosts();
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
const startIndex = (currentPage – 1) * POSTS_PER_PAGE;
const currentPosts = posts.slice(startIndex, startIndex + POSTS_PER_PAGE);

return (

);
}
“`

## 总结

通过以上步骤，已经成功构建了一个高性能的 Next.js 14 SSG 博客，并配置了自动部署到 Vercel 的流程。这个实现具有以下优势：

1. **性能优化**：使用静态生成确保了极快的加载速度
2. **开发体验**：利用 Next.js 14 的新特性提高了开发效率
3. **自动化部署**：通过 Vercel 实现了持续集成和部署
4. **可扩展性**：易于添加新功能如搜索、分页等

进一步的优化方向可以包括：
– 添加评论系统
– 实现多语言支持
– 集成分析工具
– 添加 RSS 订阅功能

这个博客架构不仅适合个人使用，也可以扩展为更复杂的 CMS 系统，为未来的发展提供了坚实的基础。