从零搭建个人网站：Next.js 完全指南 #

本文将带你从零开始，使用 Next.js 搭建一个现代化的个人网站，并部署到 Vercel。无论你是前端新手还是有一定经验的开发者，都能从中获益。

为什么选择 Next.js #

Next.js 是由 Vercel 团队开发的 React 全栈框架，它在 React 的基础上提供了许多开箱即用的功能：

服务端渲染 (SSR) — 更好的 SEO 和首屏加载速度
静态生成 (SSG) — 构建时生成 HTML，性能极致
文件系统路由 — 无需配置路由，创建文件即创建页面
API 路由 — 在同一个项目中编写后端接口
图片优化 — 内置的 Image 组件自动优化图片
TypeScript 支持 — 开箱即用，无需额外配置

Next.js 是目前最流行的 React 框架之一，GitHub 上已有超过 12 万颗星。

环境准备 #

在开始之前，确保你的电脑已经安装了以下工具：

Node.js 18+ — 推荐使用 LTS 版本
npm 或 pnpm — 包管理器
VS Code — 推荐的代码编辑器
Git — 版本控制工具

# 检查 Node.js 版本
node --version
# 应该输出 v18.x.x 或更高

# 检查 npm 版本
npm --version

创建 Next.js 项目 #

使用官方脚手架工具创建项目：

npx create-next-app@latest my-website

创建过程中会询问你几个选项，推荐选择：

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use src/ directory? Yes
✔ Would you like to use App Router? Yes
✔ Would you like to customize the default import alias? No

cd my-website
npm run dev

打开浏览器访问 http://localhost:3000，你就能看到 Next.js 的默认页面了。

理解项目结构 #

my-website/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # 根布局
│   │   ├── page.tsx        # 首页
│   │   └── globals.css     # 全局样式
│   └── components/         # 组件目录（自建）
├── public/                 # 静态资源
├── next.config.js          # Next.js 配置
├── tailwind.config.ts      # Tailwind 配置
├── tsconfig.json           # TypeScript 配置
└── package.json

App Router 核心概念 #

Next.js 13+ 引入了 App Router，它基于文件系统的约定：

page.tsx — 定义页面内容
layout.tsx — 定义页面布局（可嵌套）
loading.tsx — 加载状态
error.tsx — 错误处理
not-found.tsx — 404 页面

搭建首页 #

让我们创建一个简洁的个人首页：

// src/app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center p-8">
      <h1 className="text-4xl font-bold mb-4">
        你好，我是 LZ
      </h1>
      <p className="text-lg text-gray-600 mb-8">
        全栈开发者 / 摄影爱好者 / 终身学习者
      </p>
      <div className="flex gap-4">
        <a href="/blog" className="px-6 py-3 bg-black text-white rounded-lg">
          阅读博客
        </a>
        <a href="/projects" className="px-6 py-3 border rounded-lg">
          查看项目
        </a>
      </div>
    </main>
  )
}

创建博客页面 #

博客列表页 #

// src/app/blog/page.tsx
interface Post {
  slug: string
  title: string
  date: string
  excerpt: string
}

const posts: Post[] = [
  {
    slug: "hello-world",
    title: "Hello World",
    date: "2026-01-01",
    excerpt: "这是我的第一篇博客文章",
  },
]

export default function BlogPage() {
  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">博客</h1>
      {posts.map((post) => (
        <article key={post.slug} className="mb-8 pb-8 border-b">
          <a href={`/blog/${post.slug}`}>
            <h2 className="text-xl font-semibold">{post.title}</h2>
          </a>
          <time className="text-sm text-gray-500">{post.date}</time>
          <p className="mt-2 text-gray-600">{post.excerpt}</p>
        </article>
      ))}
    </main>
  )
}

博客详情页（动态路由） #

// src/app/blog/[slug]/page.tsx
export default function PostPage({
  params,
}: {
  params: { slug: string }
}) {
  return (
    <article className="max-w-2xl mx-auto p-8 prose">
      <h1>文章标题</h1>
      <p>文章内容...</p>
    </article>
  )
}

提示： [slug] 是 Next.js 的动态路由语法，URL 中的值会作为 params 传入组件。

添加全局布局 #

// src/app/layout.tsx
import "./globals.css"

export const metadata = {
  title: "我的个人网站",
  description: "一个使用 Next.js 搭建的个人网站",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        <nav className="border-b px-8 py-4 flex justify-between">
          <a href="/" className="font-bold">LZ.wiki</a>
          <div className="flex gap-6">
            <a href="/blog">博客</a>
            <a href="/projects">项目</a>
            <a href="/about">关于</a>
          </div>
        </nav>
        {children}
      </body>
    </html>
  )
}

部署到 Vercel #

部署 Next.js 项目到 Vercel 非常简单：

步骤一：推送代码到 GitHub #

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/你的用户名/my-website.git
git push -u origin main

步骤二：连接 Vercel #

访问 vercel.com 并登录
点击 “New Project”
导入你的 GitHub 仓库
Vercel 会自动检测 Next.js 项目并配置构建设置
点击 “Deploy” 即可

步骤三：配置自定义域名 #

在 Vercel 项目设置中：

进入 Settings > Domains
添加你的域名
按照提示在域名服务商处配置 DNS 记录

进阶优化建议 #

SEO 优化 — 使用 metadata API 为每个页面添加标题和描述
性能优化 — 使用 next/image 组件优化图片加载
Markdown 支持 — 集成 MDX 或 remark 来渲染 Markdown 文章
暗色模式 — 使用 next-themes 实现主题切换
分析工具 — 集成 Vercel Analytics 追踪访问数据

总结 #

通过本文，你学会了：

创建 Next.js 项目并理解其项目结构
使用 App Router 创建页面和布局
实现博客列表和动态路由
部署项目到 Vercel

Next.js 的生态非常丰富，这只是一个起点。接下来你可以尝试集成数据库、添加认证系统、实现评论功能等。