如何给网站优化,石岩做网站公司,企业网站做静态网站还是,网站开发建设步骤第 1 篇#xff1a;10 分钟用 Next.js Vercel 搭建现代化网站 作者#xff1a; WENG YONGGANG(翁勇刚) | Universiti of Technologi Malaysia 马来西亚理工大学 更新时间#xff1a; 2026 年 2 月 28 日 难度#xff1a; ⭐☆☆☆☆ | 预计耗时#xff1a; 10 分钟 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 分钟