Senior React/Next.js frontend …

# Next.js 公司博客模块实现方案

一、技术选型

• 框架：Next.js 14（App Router）
• Markdown渲染：react-markdown + remark-gfm（支持表格、删除线）
• 数据处理：博客文章存本地 Markdown 文件，用 gray-matter 解析 frontmatter
• 样式：Tailwind CSS（快速排版）

二、项目结构

```

app/

├── blog/

│ ├── page.tsx # 博客列表 + 分页

│ └── [slug]/page.tsx # 文章详情页

content/posts/ # Markdown 文件目录

lib/posts.ts # 文章读取工具函数

```

三、核心实现步骤

1. 安装依赖

```bash

npm install react-markdown remark-gfm gray-matter

```

2. 读取文章

```ts

// lib/posts.ts

import fs from 'fs';

import path from 'path';

import matter from 'gray-matter';

const dir = path.join(process.cwd(), 'content/posts');

export function getAllPosts() {

const files = fs.readdirSync(dir);

return files.map(f => {

const raw = fs.readFileSync(path.join(dir, f), 'utf-8');

const { data, content } = matter(raw);

return { slug: f.replace('.md', ''), ...data, content };

}).sort((a, b) => new Date(b.date) - new Date(a.date));

}

```

3. 分页列表（每页10篇）

• 列表页读取 searchParams.page（默认第1页）
• 用 posts.slice((page-1)*10, page*10) 切片
• 计算总页数 Math.ceil(total / 10)，渲染上一页/下一页及页码链接

4. 文章详情页

• params.slug 读取对应文件，generateStaticParams 预渲染全部文章（SSG，利于 SEO）
• 渲染：

```tsx

<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>

```

四、SEO优化建议

• 文章页导出 generateMetadata，注入标题、描述
• 添加 Open Graph 标签，便于分享到社交媒体

五、部署到 Vercel

1. 代码推送到 GitHub 仓库

2. Vercel 控制台导入仓库，框架自动识别 Next.js

3. 直接点 Deploy，无需额外配置

4. 后续推送代码自动触发重新部署；可绑定公司自有域名

六、注意事项

• Markdown 中图片建议放 public/images/ 并用绝对路径引用
• 文章量大后可迁移到 MDX（支持组件）或接 CMS（如 Contentful）