第 1 篇：10 分钟用 Next.js + Vercel 搭建现代化网站-171主机测评

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

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

3月2日更新，增加了使用本文章示例搭建的网站截图

在这里插入图片描述

🎯 学习目标

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

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

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

以下是使用相同方式搭建的示例网站，可以通过 neuroconscious.link访问

在这里插入图片描述

📋 课前准备

必需软件

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

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 添加域名

访问 Vercel Dashboard

选择你的项目

点击 Settings → Domains

点击 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 部署失败，提示构建错误

排查步骤：

本地运行 npm run build 看是否有同样错误

检查 TypeScript 类型错误（常见于严格模式）

查看 Vercel 部署日志（Inspect 链接）

尝试删除 .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 优化完全指南

💬 遇到问题？

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

检查本文的「常见问题」部分

查阅 Next.js 官方文档

在 GitHub Issues 提问

加入 Next.js 中文社区交流

作者联系方式：

🌐 官网：neuroconscious.link
📚 CSDN 博客：https://blog.csdn.net/yweng18/

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