第 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.17Next.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 snippetsPrettier - Code formatterTailwind CSS IntelliSense 步骤 1初始化项目3 分钟1.1 打开终端选择一个你存放项目的目录例如Windows:cd D:\ProjectsmacOS/Linux:cd~/Projects1.2 运行 create-next-appNext.js 官方提供了一个强大的脚手架工具可以一键生成项目模板。npx create-next-applatest 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 langen body{children}/body /html ) }src/app/page.tsx- 首页访问http://localhost:3000/时显示的页面。export default function Home() { return ( main h1Hello 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 langzh-CN body className{${geistSans.variable} ${geistMono.variable} antialiased} {/* Header */} header classNamebg-white dark:bg-gray-900 border-b nav classNamemax-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 div classNameflex justify-between items-center a href/ classNametext-xl font-bold text-gray-900 dark:text-white 我的网站 /a div classNamespace-x-4 a href/about classNametext-gray-600 hover:text-gray-900 dark:text-gray-300 关于 /a a href/blog classNametext-gray-600 hover:text-gray-900 dark:text-gray-300 博客 /a /div /div /nav /header {/* 主内容区 */} {children} {/* Footer */} footer classNamebg-gray-50 dark:bg-gray-800 border-t mt-20 div classNamemax-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 classNamemin-h-screen bg-white dark:bg-black {/* Hero Section */} section classNamepy-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-black div classNamemax-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center h1 classNametext-5xl font-bold text-gray-900 dark:text-white mb-6 欢迎来到我的个人空间 /h1 p classNametext-xl text-gray-600 dark:text-gray-400 mb-8 这里分享我的技术思考、项目经验和生活感悟 /p div classNamespace-x-4 Link href/about classNameinline-block bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition 了解更多 /Link Link href/blog classNameinline-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 classNamepy-16 bg-gray-50 dark:bg-gray-900 div classNamemax-w-7xl mx-auto px-4 sm:px-6 lg:px-8 div classNamegrid grid-cols-1 md:grid-cols-3 gap-8 div classNamebg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm h3 classNametext-xl font-bold text-gray-900 dark:text-white mb-2 技术分享 /h3 p classNametext-gray-600 dark:text-gray-400 深度学习、Web 开发、云计算等前沿技术实践 /p /div div classNamebg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm h3 classNametext-xl font-bold text-gray-900 dark:text-white mb-2 项目经验 /h3 p classNametext-gray-600 dark:text-gray-400 真实项目案例复盘从 0 到 1 的完整过程 /p /div div classNamebg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm h3 classNametext-xl font-bold text-gray-900 dark:text-white mb-2 学习笔记 /h3 p classNametext-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恭喜你看到了自己的网站(提示按CtrlC可以停止开发服务器)☁️ 步骤 4部署到 Vercel2 分钟现在让你的网站被全世界访问到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 ? Whats your projects 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.com5.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 16React 全栈框架SSR/SSG混合渲染、优秀的 DXTypeScript类型安全的 JavaScript减少运行时错误、更好的 IDE 支持Tailwind CSS原子化 CSS 框架快速开发、无需写自定义 CSSVercel部署平台零配置、全球 CDN、自动 HTTPS关键概念1. App Router vs Pages RouterNext.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/await2. 服务端渲染SSRvs 静态生成SSGSSR每次请求时动态生成 HTML适合个性化内容SSG构建时预先生成 HTML适合博客、文档Next.js 允许混合使用默认是 SSG如需 SSR 可使用dynamic force-dynamic。3. Tailwind CSS 命名约定!-- 响应式 --divclassmd:grid-cols-3/div!-- 中屏以上应用 --!-- 暗色模式 --divclassbg-white dark:bg-gray-900/div!-- 状态 --divclasshover:bg-blue-700/div❓ 常见问题Q1:npx create-next-app卡住不动怎么办原因网络问题导致依赖下载缓慢解决方案# 使用国内镜像npmconfigsetregistry https://registry.npmmirror.com# 重新运行npx create-next-applatest 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是否清除了浏览器缓存CtrlShiftR 强制刷新使用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 分钟