Skip to Content

基于 Next.js 和 Nextra 搭建个人技术博客

本文将详细介绍如何使用 Next.js 和 Nextra 搭建一个现代化的个人技术博客。

技术栈选择

  • Next.js: React 框架，提供服务端渲染和静态站点生成
  • Nextra: 基于 Next.js 的文档站点生成器
  • MDX: 支持在 Markdown 中使用 React 组件
  • TypeScript: 提供类型安全

搭建步骤

1. 项目初始化

首先使用 create-next-app 创建项目：

pnpm create next-app blog --typescript

2. 安装依赖

安装必要的依赖包：

pnpm add nextra nextra-theme-docs

3. 配置 Next.js

创建 next.config.ts 文件：

import nextra from 'nextra';
 
const withNextra = nextra({
  staticImage: true,
});
 
export default withNextra({
  // 其他 Next.js 配置
});

4. 配置布局

在 app/layout.tsx 中设置基础布局：

import { Layout, Navbar, Footer } from 'nextra-theme-docs';
import 'nextra-theme-docs/style.css';
 
// 配置导航栏
const navbar = (
  <Navbar
    projectLink="https://github.com/你的用户名"
    logo={<b>你的博客名称</b>}
  />
);
 
// 配置页脚
const footer = <Footer>© {new Date().getFullYear()} 你的博客.</Footer>;
 
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Layout navbar={navbar} footer={footer}>
          {children}
        </Layout>
      </body>
    </html>
  );
}

5. 内容组织

在 content 目录下组织你的博客文章：

content/
  ├── index.mdx        # 首页
  ├── 技术文章/
  │   ├── article1.mdx
  │   └── article2.mdx
  └── 教程/
      └── tutorial1.mdx

特色功能

  1. MDX 支持: 可以在 Markdown 中使用 React 组件
  2. 自动生成目录: Nextra 自动为文章生成目录
  3. 深色模式: 内置的主题切换功能
  4. 响应式设计: 适配各种屏幕尺寸
  5. SEO 优化: 自动生成 meta 标签

部署

博客可以轻松部署到 Vercel 平台：

  1. 将代码推送到 GitHub
  2. 在 Vercel 中导入项目
  3. 自动部署完成

性能优化

  1. 图片优化: 使用 Next.js 的图片组件
  2. 代码分割: Next.js 自动进行代码分割
  3. 静态生成: 将博客文章预渲染为静态 HTML

后续扩展

  1. 添加评论系统
  2. 集成数据统计
  3. 添加搜索功能
  4. 优化 SEO

总结

使用 Next.js 和 Nextra 搭建博客具有以下优势：

  • 开发体验好
  • 性能优秀
  • 易于维护
  • 扩展性强

希望这个教程能帮助你搭建自己的技术博客！

Last updated on