我的技术博客

Next.js 14 博客搭建指南

作者: Nexus Trinity... 次浏览
🚀项目
Next.jsReact博客开发

使用 Next.js 14 和 TypeScript 搭建现代化博客的完整指南

Next.js 14 博客搭建指南

本文将介绍如何使用 Next.js 14 搭建一个现代化的博客系统。

技术栈选择

我们选择以下技术栈：

  • Next.js 14: 使用最新的 App Router
  • TypeScript: 类型安全
  • Tailwind CSS: 快速样式开发
  • Markdown: 内容管理

项目初始化

首先创建 Next.js 项目：

npx create-next-app@latest my-blog
cd my-blog
npm install

Markdown 解析

安装必要的依赖：

npm install gray-matter remark remark-html shiki

解析 Markdown 文件

创建工具函数读取和解析 Markdown 文件：

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

export function getPostBySlug(slug: string) {
  const fullPath = path.join(process.cwd(), 'content/posts', `${slug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const { data, content } = matter(fileContents);

  return {
    slug,
    frontMatter: data,
    content,
  };
}

样式设计

使用 Tailwind CSS 设计博客样式：

  • 响应式布局
  • 暗色主题
  • 代码高亮

总结

通过以上步骤，我们成功搭建了一个功能完整的博客系统。主要特性包括：

  1. Markdown 文章支持
  2. 代码语法高亮
  3. 响应式设计
  4. SEO 优化

接下来可以添加更多功能，如评论系统、搜索功能等。

📚 相关文章推荐