第 1 篇：10 分钟用 Next.js + Vercel 搭建现代化网站

作者： WENG YONGGANG(翁勇刚) | Universiti of Technologi Malaysia 马来西亚理工大学
更新时间： 2026 年 2 月 28 日
难度： ⭐☆☆☆☆ | 预计耗时： 10 分钟

在这里插入图片描述

🎯 学习目标

完成本教程后，你将能够：

  • ✅ 使用 Next.js 16 快速初始化一个现代化网站
  • ✅ 理解 App Router 的基本文件结构
  • ✅ 创建基础的页面布局（Header/Footer）
  • ✅ 一键部署到 Vercel 并生成可访问的 URL
  • ✅ 绑定自定义域名（可选）

最终成果： 一个可以通过 https://yourname.vercel.app 访问的现代化网站！

在这里插入图片描述

📋 课前准备

必需软件

在开始之前，请确保你的电脑已安装以下软件：

1. Node.js（>= 18.17）

Next.js 16 需要 Node.js 18.17 或更高版本。

检查是否已安装：

node -v

如果显示版本号（如 v20.11.0），说明已安装。如果没有，请前往 Node.js 官网 下载并安装 LTS 版本（长期支持版）。

推荐安装方式（使用 nvm）：

# Windows 用户：下载安装 https://github.com/coreybutler/nvm-windows/releases
nvm install 20
nvm use 20
2. npm（随 Node.js 一起安装）

检查是否已安装：

npm -v

应该显示类似 10.2.4 的版本号。

3. 代码编辑器（推荐 VS Code）

虽然任何文本编辑器都可以，但我强烈推荐使用 Visual Studio Code，它对 React/TypeScript 有极好的支持。

必装扩展：

  • ES7+ React/Redux/React-Native snippets
  • Prettier - Code formatter
  • Tailwind CSS IntelliSense

在这里插入图片描述
在这里插入图片描述

🚀 步骤 1：初始化项目（3 分钟）

1.1 打开终端

选择一个你存放项目的目录，例如：

Windows:

cd D:\Projects

macOS/Linux:

cd ~/Projects

1.2 运行 create-next-app

Next.js 官方提供了一个强大的脚手架工具，可以一键生成项目模板。

npx create-next-app@latest neuroconscious-web --typescript --tailwind --app --eslint

参数说明：

  • --typescript：启用 TypeScript 支持
  • --tailwind：集成 Tailwind CSS
  • --app：使用最新的 App Router
  • --eslint：配置 ESLint 代码检查

交互式问题回答：

运行后会提示你确认一些配置，建议如下选择：

Would you like to use src/ directory? › No
Would you like to use App Router? (recommended) › Yes
Would you like to customize the default import alias (@/*)? › No
What type of code would you like to use? › TypeScript

1.3 等待安装完成

create-next-app 会自动安装所有依赖，大约需要 1-2 分钟。完成后你会看到：

✔ Created next-app project using create-next-app!
✔ Installed dependencies
✔ Configured TypeScript, Tailwind CSS, and ESLint

Success! Created neuroconscious-web at D:\Projects\neuroconscious-web

1.4 进入项目目录

cd neuroconscious-web

在这里插入图片描述

📁 步骤 2：理解项目结构（2 分钟）

打开项目后，你会看到以下文件结构：

neuroconscious-web/
├── node_modules/          # 依赖包（不要手动修改）
├── public/                # 静态资源（图片、字体等）
│   └── favicon.ico
├── src/                   # 源代码目录
│   └── app/               # App Router 核心目录
│       ├── globals.css    # 全局样式
│       ├── layout.tsx     # 根布局（所有页面共享）
│       └── page.tsx       # 首页
├── .gitignore             # Git 忽略文件
├── next.config.mjs        # Next.js 配置
├── package.json           # 项目依赖和脚本
├── tailwind.config.ts     # Tailwind CSS 配置
└── tsconfig.json          # TypeScript 配置

在这里插入图片描述

关键文件解释

src/app/layout.tsx - 根布局

这是所有页面的共同外壳，通常包含 <html>、<body> 标签和全局 Provider。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
src/app/page.tsx - 首页

访问 http://localhost:3000/ 时显示的页面。

export default function Home() {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}
package.json - 项目配置

重点关注 scripts 部分：

{
  "scripts": {
    "dev": "next dev",      // 启动开发服务器
    "build": "next build",  // 构建生产版本
    "start": "next start"   // 启动生产服务器
  }
}

🎨 步骤 3：创建基础页面（3 分钟）

现在让我们创建一个简单的个人网站，包含 Header、Footer 和内容区。

3.1 修改根布局

打开 src/app/layout.tsx，替换为以下内容：

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// 配置字体（自动优化加载）
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

// SEO 元数据
export const metadata: Metadata = {
  title: "我的个人网站",
  description: "欢迎来到我的个人空间",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        {/* Header */}
        <header className="bg-white dark:bg-gray-900 border-b">
          <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div className="flex justify-between items-center">
              <a href="/" className="text-xl font-bold text-gray-900 dark:text-white">
                我的网站
              </a>
              <div className="space-x-4">
                <a href="/about" className="text-gray-600 hover:text-gray-900 dark:text-gray-300">
                  关于
                </a>
                <a href="/blog" className="text-gray-600 hover:text-gray-900 dark:text-gray-300">
                  博客
                </a>
              </div>
            </div>
          </nav>
        </header>

        {/* 主内容区 */}
        {children}

        {/* Footer */}
        <footer className="bg-gray-50 dark:bg-gray-800 border-t mt-20">
          <div className="max-w-7xl mx-auto px-4 py-8 text-center text-gray-600 dark:text-gray-400">
            © 2026 我的个人网站。All rights reserved.
          </div>
        </footer>
      </body>
    </html>
  );
}

关键点说明：

  • 使用了 next/font 自动优化 Google Fonts 加载
  • 支持暗色模式（dark: 前缀的类）
  • 响应式导航栏（移动端友好）
  • 使用 Tailwind CSS 进行样式设计

3.2 修改首页

打开 src/app/page.tsx，替换为：

import Link from 'next/link';

export default function Home() {
  return (
    <div className="min-h-screen bg-white dark:bg-black">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
            欢迎来到我的个人空间
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
            这里分享我的技术思考、项目经验和生活感悟
          </p>
          <div className="space-x-4">
            <Link
              href="/about"
              className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition"
            >
              了解更多
            </Link>
            <Link
              href="/blog"
              className="inline-block bg-gray-200 text-gray-800 px-8 py-3 rounded-lg hover:bg-gray-300 transition dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
            >
              查看博客
            </Link>
          </div>
        </div>
      </section>

      {/* 特性展示 */}
      <section className="py-16 bg-gray-50 dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
                🚀 技术分享
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                深度学习、Web 开发、云计算等前沿技术实践
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
                💡 项目经验
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                真实项目案例复盘，从 0 到 1 的完整过程
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
                📚 学习笔记
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                持续学习，持续成长，记录每一步收获
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

关键点说明：

  • 使用 Link 组件实现客户端路由（无刷新跳转）
  • 渐变背景提升视觉效果
  • 响应式网格布局（Mobile First）
  • 支持暗色模式

3.3 启动开发服务器

在项目根目录运行：

npm run dev

你应该会看到：

> next dev
  ▲ Next.js 16.1.6 (Turbopack)
  - Local:        http://localhost:3000
  - Ready in 1234ms

打开浏览器访问 http://localhost:3000，恭喜你看到了自己的网站！🎉

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

(提示：按 Ctrl+C 可以停止开发服务器)

☁️ 步骤 4：部署到 Vercel（2 分钟）

现在让你的网站被全世界访问到！

4.1 注册 Vercel 账号

访问 Vercel 官网，建议使用 GitHub 账号登录（最方便）。

如果没有 GitHub 账号，也可以用 Email 注册。

4.2 安装 Vercel CLI（可选但推荐）

虽然可以直接在网页上部署，但我推荐安装 CLI 工具：

npm install -g vercel

验证安装：

vercel -v

4.3 首次部署

在项目根目录运行：

vercel --prod

第一次运行的交互流程：

? Set up and deploy "~/Projects/neuroconscious-web"? [Y/n]
  › Y
? Which scope do you want to deploy to? （选择你的账号）
  › Your Name
? Link to existing project? [y/N]
  › N
? What's your project's name? （输入项目名，如 my-website）
  › my-website
? In which directory is your code located? ./
? Want to override the settings? [y/N]
  › N

然后 Vercel 会自动构建并部署，大约需要 1-2 分钟。完成后你会看到：

🔍 Inspect: https://vercel.com/yourname/my-website/abc123xyz
✅ Production: https://my-website.vercel.app

恭喜！你的网站已经上线了！ 🎊

访问生成的链接，分享给朋友们吧！

4.4 本地测试生产构建（可选）

在部署前，建议先本地测试生产构建：

npm run build
npm run start

这会模拟生产环境，确保没有构建错误。

🔗 步骤 5：绑定自定义域名（可选）

如果你有自己的域名（如 yourname.com），可以绑定到 Vercel。

5.1 在 Vercel Dashboard 添加域名

  1. 访问 Vercel Dashboard
  2. 选择你的项目
  3. 点击 Settings → Domains
  4. 点击 Add，输入你的域名（如 yourname.com）

5.2 配置 DNS 记录

Vercel 会提示你添加 DNS 记录。登录你的域名注册商后台（GoDaddy、Namecheap、阿里云等），添加以下记录：

类型 A：

主机记录：@
记录值：76.76.21.21

类型 CNAME（可选，用于 www 子域名）：

主机记录：www
记录值：cname.vercel-dns.com

5.3 等待 DNS 生效

DNS 变更通常需要 5-30 分钟生效，最长可能 48 小时（实测1分钟生效）。

生效后，访问 https://yourname.com 就会显示你的网站！

🎓 知识点总结

核心技术栈

技术 作用 为什么选择
Next.js 16 React 全栈框架 SSR/SSG混合渲染、优秀的 DX
TypeScript 类型安全的 JavaScript 减少运行时错误、更好的 IDE 支持
Tailwind CSS 原子化 CSS 框架 快速开发、无需写自定义 CSS
Vercel 部署平台 零配置、全球 CDN、自动 HTTPS

关键概念

1. App Router vs Pages Router

Next.js 13+ 引入了 App Router，基于 React Server Components：

旧版 Pages Router:     新版 App Router:
pages/index.tsx   →    app/page.tsx
pages/about.tsx   →    app/about/page.tsx

优势：

  • 更直观的文件夹路由
  • 支持服务端组件（减少客户端 JS）
  • 内置布局系统（layout.tsx）
  • 更好的数据获取（async/await）
2. 服务端渲染（SSR）vs 静态生成（SSG）
  • SSR：每次请求时动态生成 HTML（适合个性化内容）
  • SSG：构建时预先生成 HTML（适合博客、文档）

Next.js 允许混合使用，默认是 SSG，如需 SSR 可使用 dynamic = 'force-dynamic'。

3. Tailwind CSS 命名约定
<!-- 响应式 -->
<div class="md:grid-cols-3"></div>  <!-- 中屏以上应用 -->

<!-- 暗色模式 -->
<div class="bg-white dark:bg-gray-900"></div>

<!-- 状态 -->
<div class="hover:bg-blue-700"></div>

❓ 常见问题

Q1: npx create-next-app 卡住不动怎么办？

原因： 网络问题导致依赖下载缓慢

解决方案：

# 使用国内镜像
npm config set registry https://registry.npmmirror.com

# 重新运行
npx create-next-app@latest my-site --typescript --tailwind --app

Q2: 开发服务器启动失败，提示端口被占用

错误信息：

Error: listen EADDRINUSE: address already in use :::3000

解决方案：

# Windows
netstat -ano | findstr :3000
taskkill /PID <进程 PID> /F

# macOS/Linux
lsof -i :3000
kill -9 <进程 PID>

或者换个端口：

npm run dev -- -p 3001

Q3: Vercel 部署失败，提示构建错误

排查步骤：

  1. 本地运行 npm run build 看是否有同样错误
  2. 检查 TypeScript 类型错误（常见于严格模式）
  3. 查看 Vercel 部署日志（Inspect 链接）
  4. 尝试删除 .next 文件夹后重新构建

Q4: 自定义域名一直不生效怎么办？

检查清单：

  • DNS 记录是否正确（注意主机记录是 @ 还是 www）
  • 是否清除了浏览器缓存（Ctrl+Shift+R 强制刷新）
  • 使用 ping yourdomain.com 检查是否解析到 Vercel IP
  • 在 Vercel Dashboard 确认域名状态为 “Active”

📚 下一步

恭喜你完成了第 1 篇！现在你已经有了一个可以访问的网站，但它还很简单。

在 第 2 篇：SEO 优化完全指南 中，我们将学习：

  • ✨ 如何配置 Meta 标签让 Google 理解你的网站
  • 🏷️ 添加 Schema.org 结构化数据提升搜索排名
  • 🖼️ 自动生成 Open Graph 图片（社交媒体分享卡片）
  • 🗺️ 创建 sitemap.xml 帮助搜索引擎索引

继续学习 → 第 2 篇：SEO 优化完全指南

💬 遇到问题？

如果在学习过程中遇到困难，欢迎：

  1. 检查本文的「常见问题」部分
  2. 查阅 Next.js 官方文档
  3. 在 GitHub Issues 提问
  4. 加入 Next.js 中文社区交流

作者联系方式：

最后更新： 2026 年 3 月 1 日
本文字数： ~3500 字
阅读时间： ~10 分钟

# 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

基于现有数据的AI职位需求构建与人才竞争力评估

avatar 2048 AI社区
cover

收藏级｜小白也能上手！用魔搭+LLaMA Factory手把手实操大模型微调全流程

avatar 2048 AI社区
cover

Paperzz AI PPT 生成器：告别熬夜做 PPT，让学术与职场汇报一键出彩

avatar 2048 AI社区