Back to Projects
个人博客网站
使用 Next.js 构建的个人博客网站，支持 MDX 内容管理
·1 min read·前端开发
个人博客网站
一个基于 Next.js 15 构建的现代个人博客网站，支持 MDX 内容管理。
项目概述
这个项目是一个可定制的个人博客平台，具有以下特点：
- 使用 Next.js 15 构建，支持 App Router
- MDX 格式内容管理
- 响应式设计，适配各种设备
- 良好的可访问性和性能优化
- 黑暗模式支持
技术实现
前端
- Next.js 15: React 框架
- TailwindCSS: 样式
- TypeScript: 类型安全
- next-mdx-remote: MDX 内容渲染
部署
- Vercel: 部署和托管
- GitHub Actions: CI/CD 流程
学习收获
通过这个项目，我深入学习了 Next.js 的最新特性，包括 App Router、服务器组件和静态生成。同时也提升了我对内容管理系统设计的理解。
// 示例：如何在 Next.js 中集成 MDX
import { compileMDX } from 'next-mdx-remote/rsc';
import rehypeHighlight from 'rehype-highlight';
import remarkGfm from 'remark-gfm';
async function renderMDX(content) {
const result = await compileMDX({
source: content,
options: {
mdxOptions: {
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypeHighlight],
},
},
});
return result.content;
}