第 1 篇：10 分钟用 Next.js + Vercel 搭建现代化网站
第 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/releasesnvminstall20nvm use202. 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:\ProjectsmacOS/Linux:
cd~/Projects1.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? › TypeScript1.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-web1.4 进入项目目录
cdneuroconscious-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 启动开发服务器
在项目根目录运行：
npmrun 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 工具：
npminstall-gvercel验证安装：
vercel-v4.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 本地测试生产构建（可选）
在部署前，建议先本地测试生产构建：
npmrun buildnpmrun 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.com5.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 命名约定
<!-- 响应式 --><divclass="md:grid-cols-3"></div><!-- 中屏以上应用 --><!-- 暗色模式 --><divclass="bg-white dark:bg-gray-900"></div><!-- 状态 --><divclass="hover:bg-blue-700"></div>❓ 常见问题
Q1:npx create-next-app卡住不动怎么办？
原因：网络问题导致依赖下载缓慢
解决方案：
# 使用国内镜像npmconfigsetregistry https://registry.npmmirror.com# 重新运行npx create-next-app@latest my-site--typescript--tailwind--appQ2: 开发服务器启动失败，提示端口被占用
错误信息：
Error: listen EADDRINUSE: address already in use :::3000解决方案：
# Windowsnetstat-ano|findstr :3000 taskkill /PID<进程 PID>/F# macOS/Linuxlsof-i:3000kill-9<进程 PID>或者换个端口：
npmrun dev ---p3001Q3: 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 分钟