使用 Next.js 构建个人博客

我决定使用 Next.js 构建一个个人博客，并想分享我的开发历程和技术决策。

为什么要用 Next.js？

Next.js 提供了出色的开发体验和开箱即用的性能：

• 静态站点生成 (SSG) - 预渲染页面以获得最佳性能
• API 路由 - 无需额外后端即可使用内置 API 支持
• SEO - 使用 generateMetadata 轻松管理元标签
• TypeScript - 完整的类型安全

技术栈

这是我用来构建博客的技术：

代码示例

获取博客文章的方法：

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'content/blog');

export function getSortedPostsData() {
  const fileNames = fs.readdirSync(postsDirectory);
  
  return fileNames.map((fileName) => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const { data } = matter(fileContents);
    
    return { slug, ...data };
  });
}

SEO 最佳实践

对于个人博客，SEO 非常重要。我实现了：

1. 元标签 - 使用 Next.js generateMetadata
2. OpenGraph - 社交媒体预览
3. 网站地图 - XML 网站地图生成
4. RSS 订阅 - 订阅器支持
5. JSON-LD - 结构化数据

后续内容

更多文章即将推出：

• Web 开发教程
• UI/UX 设计原则
• 摄影技巧
• 游戏开发
• 等等！

欢迎在下方留言评论！