从零搭建 Next.js 个人网站：静态导出架构与工程实践

项目背景与技术选型

个人网站是开发者最好的名片。在技术选型上，我选择了 Next.js 14 作为核心框架，主要基于以下考量：

静态导出（Static Export）：next.config.mjs 中配置 output: "export"，构建时预渲染所有页面为纯静态 HTML。这带来了两个核心收益——零服务端运行时依赖，可以直接部署到任何静态文件服务器（Nginx、CDN、S3）；首屏加载速度极快，First Contentful Paint 控制在 300ms 以内。

App Router 架构：Next.js 14 的 App Router 采用文件系统路由和 React Server Components 范式。与 Pages Router 不同，App Router 天然支持布局嵌套（layout.tsx）、加载态（loading.tsx）和错误边界（error.tsx）的声明式组合，无需手动维护路由表。

Tailwind CSS 原子化样式：选择 Tailwind 而非 CSS Modules 或 styled-components，核心原因在于其 utility-first 范式能显著降低 CSS 体积——通过 JIT 编译，生产包中只包含实际使用到的样式类，最终 CSS 体积压缩到不足 10KB。

项目结构设计

src/
├── app/
│   ├── layout.tsx        # 根布局（Header + Footer 组合）
│   ├── page.tsx           # 首页（Hero + 精选项目 + 最新文章）
│   ├── about/page.tsx     # 关于页
│   ├── blog/
│   │   ├── page.tsx       # 博客列表
│   │   └── [slug]/page.tsx # 博客详情（动态路由）
│   ├── projects/page.tsx  # 项目页
│   ├── memory/page.tsx    # 记忆管理系统页
│   └── globals.css        # 全局样式 + Tailwind 指令
├── components/
│   ├── Header.tsx         # 响应式导航栏
│   └── Footer.tsx         # 页脚

采用 Feature-based 目录结构，而非 Type-based。每个页面作为一个独立目录，包含自己的 page.tsx 和元数据导出。这种结构在项目规模扩大时能保持较好的可维护性——新增页面只需创建目录和文件，无需修改路由配置。

响应式布局策略

响应式设计采用 Mobile-first 断点体系：

// Tailwind 断点: sm:640px  md:768px  lg:1024px  xl:1280px

// 卡片网格：移动端 1 列 → 平板 2 列 → 桌面 3 列
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

// 内边距：移动端 py-16 → 桌面 py-24
<section className="px-6 py-16 sm:py-20 lg:py-24">

关键细节：不使用 hidden md:flex 这种硬切换方式来做移动端导航。Header 的移动端菜单采用条件渲染（{mobileOpen && <MobileMenu/>}），配合 useState 控制展开状态，这样 DOM 树在关闭状态下更轻量。

静态导出部署流水线

构建产物为纯静态文件，部署流程极为简洁：

# 本地构建
npm run build   # → out/ 目录

# SCP 上传到 Nginx 服务器
scp -r out/* root@server:/opt/myapp/html/

# Nginx 配置核心指令
try_files $uri $uri.html $uri/ =404  # 支持干净 URL

这里有一个值得注意的细节：Next.js 静态导出生成的是 about.html 而非 about/index.html。因此 Nginx 的 try_files 需要添加 $uri.html 回退，否则直接访问 /about 会返回 404。

性能优化

构建产物分析：

Shared JS Chunks 87.4 kB，其中 Next.js 运行时占大头。对于静态站点，这个体积在可接受范围内——首次加载后浏览器缓存生效，后续页面切换只需加载增量数据。

总结

Next.js 14 + Static Export 的组合特别适合个人网站、文档站、博客这类内容型站点。它结合了 React 的组件化开发体验和静态站点的部署便捷性——不需要维护服务器进程，不需要配置数据库，一个 Nginx + 一个目录就够了。