1. 为什么选择Bolt.new搭建博客第一次听说Bolt.new是在去年的一次技术分享会上当时就被它零配置的理念吸引了。作为一个经常需要快速验证想法的开发者我受够了每次新建项目都要花半天时间配置webpack、babel这些工具链。Bolt.new最吸引我的地方在于它把React、Next.js和WebContainers这三件套做了开箱即用的整合让开发者可以专注于业务逻辑而不是环境搭建。注意WebContainers是最近两年兴起的前端开发技术它允许在浏览器中直接运行Node.js环境这意味着你可以在任何设备上开发不需要本地安装Node环境。2. 环境准备与项目初始化2.1 访问Bolt.new平台直接在浏览器打开bolt.new官网这里不贴具体URL避免SEO问题你会看到一个极简的界面。不需要注册账号点击New Project按钮就能开始。我实测下来从打开网页到进入开发环境平均只需要3秒这得益于WebContainers技术。相比传统方式需要安装Node.js约5分钟创建Next.js项目约2分钟安装依赖约3分钟 总共节省了10分钟的环境准备时间。2.2 选择项目模板Bolt.new提供了几个常用模板基础React应用Next.js博客电商网站骨架个人作品集我们选择Next.js博客模板这个模板已经预置了文章列表页文章详情页Markdown解析支持基本的SEO配置3. 核心功能开发3.1 文章数据管理模板默认使用内存存储文章数据这显然不适合生产环境。我推荐以下几种改进方案本地JSON文件适合小型博客// lib/posts.js import fs from fs; import path from path; const postsDirectory path.join(process.cwd(), posts); export function getSortedPostsData() { const fileNames fs.readdirSync(postsDirectory); // ...处理逻辑 }Headless CMS集成推荐方案// lib/api.js import { createClient } from contentful; const client createClient({ space: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN }); export async function getEntries(contentType) { const entries await client.getEntries({ content_type: contentType }); return entries.items; }实操心得Contentful的免费层足够个人博客使用且提供了完善的内容管理界面。部署时记得将API密钥存入环境变量。3.2 文章页面优化模板的详情页比较基础我们可以做这些优化代码高亮支持npm install prismjs然后在文章中这样使用import Prism from prismjs; import prismjs/themes/prism-tomorrow.css; useEffect(() { Prism.highlightAll(); }, [post.content]);阅读进度指示器// components/ProgressBar.js const ProgressBar () { const [width, setWidth] useState(0); useEffect(() { const updateWidth () { const scrollTop document.documentElement.scrollTop; const scrollHeight document.documentElement.scrollHeight; const clientHeight document.documentElement.clientHeight; setWidth((scrollTop / (scrollHeight - clientHeight)) * 100); }; window.addEventListener(scroll, updateWidth); return () window.removeEventListener(scroll, updateWidth); }, []); return div style{{ width: ${width}% }} classNamefixed top-0 h-1 bg-blue-500 /; };4. 样式与主题定制4.1 使用Tailwind CSS模板默认集成了Tailwind这是我推荐保留的配置。修改tailwind.config.js可以快速定制主题module.exports { theme: { extend: { colors: { primary: { light: #5eead4, DEFAULT: #14b8a6, dark: #0f766e } } } } }4.2 暗黑模式支持现代博客的标配功能实现起来很简单// components/ThemeToggle.js import { useState, useEffect } from react; export default function ThemeToggle() { const [darkMode, setDarkMode] useState(false); useEffect(() { const isDark localStorage.getItem(darkMode) true; setDarkMode(isDark); document.documentElement.classList.toggle(dark, isDark); }, []); const toggleTheme () { const newMode !darkMode; setDarkMode(newMode); localStorage.setItem(darkMode, newMode); document.documentElement.classList.toggle(dark, newMode); }; return ( button onClick{toggleTheme} {darkMode ? ☀️ : } /button ); }记得在tailwind.config.js中启用darkModemodule.exports { darkMode: class, // ...其他配置 }5. 部署上线5.1 Vercel部署推荐在Bolt.new中导出项目代码创建Vercel账号免费拖拽项目文件夹到Vercel控制台配置环境变量如果有点击部署整个过程不超过5分钟Vercel会自动检测到是Next.js项目配置最优化的构建方案启用CDN加速配置HTTPS证书5.2 自定义域名配置在Vercel控制台进入项目设置选择Domains输入你的域名按照提示配置DNS解析避坑指南国内访问建议额外配置一个国内CDN否则加载速度可能不理想。阿里云或腾讯云的CDN都有免费额度。6. 性能优化实战6.1 图片优化Next.js内置了Image组件但需要额外配置// next.config.js module.exports { images: { domains: [images.unsplash.com], // 允许优化的图片域名 }, }使用示例import Image from next/image; Image src/profile.jpg alt作者头像 width{500} height{500} priority // 首屏图片优先加载 /6.2 代码分割Next.js自动按路由做代码分割但我们还可以优化组件级分割import dynamic from next/dynamic; const Comments dynamic( () import(../components/Comments), { loading: () p加载评论中.../p, ssr: false // 不需要服务端渲染的组件 } );7. 常见问题排查7.1 构建错误3221225477这是Windows系统常见的路径过长错误解决方案启用长路径支持管理员权限运行reg add HKLM\SYSTEM\CurrentControlSet\Control\FileSystem /v LongPathsEnabled /t REG_DWORD /d 1 /f或者将项目移到更短的路径如C:\projects7.2 样式不生效检查步骤确认Tailwind的CSS文件正确引入检查tailwind.config.js是否被正确读取确保类名没有拼写错误查看是否被更高优先级样式覆盖7.3 API路由404Next.js的API路由需要文件放在pages/api目录下默认导出请求处理方法访问路径为/api/文件名示例// pages/api/hello.js export default function handler(req, res) { res.status(200).json({ name: John Doe }); }8. 安全加固方案8.1 环境变量保护永远不要在前端代码中硬编码敏感信息// 错误做法 const API_KEY sk_live_123456; // 正确做法 const API_KEY process.env.NEXT_PUBLIC_API_KEY;然后在项目根目录创建.env.local文件NEXT_PUBLIC_API_KEYyour_key_here8.2 CSP策略配置在next.config.js中添加安全头module.exports { async headers() { return [ { source: /(.*), headers: [ { key: Content-Security-Policy, value: default-src self; script-src self unsafe-inline *.example.com; img-src self data: *.example.com; } ] } ]; } };9. 扩展功能建议9.1 评论系统推荐方案UtterancesGitHub Issues驱动GiscusGitHub Discussions驱动Disqus传统方案以Utterances为例// components/Comments.js export default function Comments() { return ( script srchttps://utteranc.es/client.js repoyourname/yourrepo issue-termpathname themegithub-light crossOriginanonymous async / ); }9.2 数据分析最简单的Google Analytics集成// lib/gtag.js export const GA_TRACKING_ID G-XXXXXXXXXX; export const pageview (url) { window.gtag(config, GA_TRACKING_ID, { page_path: url, }); }; // _app.js import { useEffect } from react; import { useRouter } from next/router; import { GA_TRACKING_ID, pageview } from ../lib/gtag; function MyApp({ Component, pageProps }) { const router useRouter(); useEffect(() { const handleRouteChange (url) { pageview(url); }; router.events.on(routeChangeComplete, handleRouteChange); return () { router.events.off(routeChangeComplete, handleRouteChange); }; }, [router.events]); return Component {...pageProps} /; }10. 维护与更新策略10.1 依赖更新建议每月检查一次依赖更新npm outdated安全更新应立即处理npm audit fix10.2 内容备份即使使用Headless CMS也应定期备份导出CMS内容为JSON提交到GitHub私有仓库存储到云存储如Google Drive自动化备份脚本示例// scripts/backup.js import { writeFileSync } from fs; import { getEntries } from ../lib/api; (async () { const posts await getEntries(post); writeFileSync(./backup/posts.json, JSON.stringify(posts)); })();11. 性能监控方案11.1 Lighthouse评分Vercel部署后会自动提供Lighthouse报告重点关注首屏时间应2s可交互时间应3.5s累计布局偏移应0.111.2 真实用户监控推荐使用开源方案// lib/metrics.js export const trackPerf () { if (PerformanceObserver in window) { const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log(entry.name, entry.duration); // 发送到分析平台 } }); observer.observe({ entryTypes: [paint, longtask] }); } }; // _app.js import { trackPerf } from ../lib/metrics; function MyApp() { useEffect(() { trackPerf(); }, []); // ... }12. 移动端优化技巧12.1 触摸反馈为按钮添加触觉反馈.btn { transition: transform 0.1s; } .btn:active { transform: scale(0.98); }12.2 防止缩放在public目录添加viewport-props.json{ viewport: widthdevice-width, initial-scale1, maximum-scale1, user-scalableno }13. 进阶功能探索13.1 离线支持通过Service Worker实现// public/sw.js self.addEventListener(install, (e) { e.waitUntil( caches.open(blog-cache).then((cache) { return cache.addAll([ /, /index.html, /styles/main.css, /script/main.js ]); }) ); }); // _app.js if (serviceWorker in navigator) { window.addEventListener(load, () { navigator.serviceWorker.register(/sw.js); }); }13.2 国际化支持Next.js内置i18n路由// next.config.js module.exports { i18n: { locales: [en, zh], defaultLocale: en, }, }创建翻译文件// locales/en.json { title: My Blog } // pages/index.js import { useRouter } from next/router; import translations from ../locales; export default function Home() { const { locale } useRouter(); const t translations[locale]; return h1{t.title}/h1; }14. 项目结构优化建议14.1 组件组织推荐结构components/ common/ Button.js Card.js layout/ Header.js Footer.js blog/ PostCard.js Tags.js14.2 样式管理Tailwind最佳实践尽量使用工具类复杂样式提取到layertailwind base; tailwind components; tailwind utilities; layer components { .special-card { apply p-6 bg-white rounded-lg shadow-xl transform transition hover:scale-105; } }15. 开发效率提升技巧15.1 代码片段VSCode配置.vscode/snippets.code-snippets{ Next Page: { prefix: npage, body: [ import { NextPage } from next;, , const ${1:PageName}: NextPage () {, return (, div, ${2}, /div, );, };, , export default ${1:PageName}; ] } }15.2 调试技巧Next.js专用调试配置launch.json{ version: 0.2.0, configurations: [ { name: Next.js, type: node, request: launch, runtimeExecutable: ${workspaceFolder}/node_modules/.bin/next, args: [dev], console: integratedTerminal, protocol: inspector } ] }16. 内容管理系统集成16.1 Strapi配置后端API示例// api/articles.js export default { async find() { return await strapi.entityService.findMany(api::article.article, { populate: [cover, author] }); } };前端调用export async function getStaticProps() { const res await fetch(http://localhost:1337/api/articles); const articles await res.json(); return { props: { articles } }; }16.2 Sanity.io方案定义内容模型schema.jsexport default { name: post, title: Post, type: document, fields: [ { name: title, title: Title, type: string }, // 更多字段... ] }17. 自动化部署流水线17.1 GitHub Actions配置name: Deploy on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-nodev2 with: node-version: 16 - run: npm ci - run: npm run build - uses: amondnet/vercel-actionv20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}17.2 预览环境配置在next.config.js中添加环境判断module.exports { env: { API_URL: process.env.NODE_ENV production ? https://api.example.com : https://staging.api.example.com } }18. 性能基准测试18.1 加载时间测试使用WebPageTest脚本// tests/performance.js const webPageTest require(webpagetest); const wpt new webPageTest(https://www.webpagetest.org); wpt.runTest(https://yourblog.com, (err, data) { console.log(data.data.median.firstView); });18.2 压力测试Artillery配置config: target: https://yourblog.com phases: - duration: 60 arrivalRate: 10 scenarios: - flow: - get: url: /19. 无障碍访问优化19.1 ARIA属性为交互元素添加button aria-labelToggle menu aria-expanded{isMenuOpen} onClick{toggleMenu} ☰ /button19.2 颜色对比度使用工具检查.text { color: #333; /* 确保与背景对比度至少4.5:1 */ }20. 项目文档编写20.1 README结构# 博客项目 ## 功能特性 - [x] 响应式设计 - [x] 暗黑模式 - [ ] 多语言支持 ## 开发指南 1. npm install 2. npm run dev ## 环境变量 NEXT_PUBLIC_API_URL - 后端API地址20.2 技术决策记录docs/ADR.md示例# 1. 为什么选择Next.js ## 状态 已采纳 ## 决策背景 需要SSR支持且希望保留React开发体验... ## 备选方案 1. Gatsby - 更适合内容型网站 2. Remix - 新兴框架生态不够成熟 使用Bolt.new和Next.js快速搭建现代化博客
1. 为什么选择Bolt.new搭建博客第一次听说Bolt.new是在去年的一次技术分享会上当时就被它零配置的理念吸引了。作为一个经常需要快速验证想法的开发者我受够了每次新建项目都要花半天时间配置webpack、babel这些工具链。Bolt.new最吸引我的地方在于它把React、Next.js和WebContainers这三件套做了开箱即用的整合让开发者可以专注于业务逻辑而不是环境搭建。注意WebContainers是最近两年兴起的前端开发技术它允许在浏览器中直接运行Node.js环境这意味着你可以在任何设备上开发不需要本地安装Node环境。2. 环境准备与项目初始化2.1 访问Bolt.new平台直接在浏览器打开bolt.new官网这里不贴具体URL避免SEO问题你会看到一个极简的界面。不需要注册账号点击New Project按钮就能开始。我实测下来从打开网页到进入开发环境平均只需要3秒这得益于WebContainers技术。相比传统方式需要安装Node.js约5分钟创建Next.js项目约2分钟安装依赖约3分钟 总共节省了10分钟的环境准备时间。2.2 选择项目模板Bolt.new提供了几个常用模板基础React应用Next.js博客电商网站骨架个人作品集我们选择Next.js博客模板这个模板已经预置了文章列表页文章详情页Markdown解析支持基本的SEO配置3. 核心功能开发3.1 文章数据管理模板默认使用内存存储文章数据这显然不适合生产环境。我推荐以下几种改进方案本地JSON文件适合小型博客// lib/posts.js import fs from fs; import path from path; const postsDirectory path.join(process.cwd(), posts); export function getSortedPostsData() { const fileNames fs.readdirSync(postsDirectory); // ...处理逻辑 }Headless CMS集成推荐方案// lib/api.js import { createClient } from contentful; const client createClient({ space: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN }); export async function getEntries(contentType) { const entries await client.getEntries({ content_type: contentType }); return entries.items; }实操心得Contentful的免费层足够个人博客使用且提供了完善的内容管理界面。部署时记得将API密钥存入环境变量。3.2 文章页面优化模板的详情页比较基础我们可以做这些优化代码高亮支持npm install prismjs然后在文章中这样使用import Prism from prismjs; import prismjs/themes/prism-tomorrow.css; useEffect(() { Prism.highlightAll(); }, [post.content]);阅读进度指示器// components/ProgressBar.js const ProgressBar () { const [width, setWidth] useState(0); useEffect(() { const updateWidth () { const scrollTop document.documentElement.scrollTop; const scrollHeight document.documentElement.scrollHeight; const clientHeight document.documentElement.clientHeight; setWidth((scrollTop / (scrollHeight - clientHeight)) * 100); }; window.addEventListener(scroll, updateWidth); return () window.removeEventListener(scroll, updateWidth); }, []); return div style{{ width: ${width}% }} classNamefixed top-0 h-1 bg-blue-500 /; };4. 样式与主题定制4.1 使用Tailwind CSS模板默认集成了Tailwind这是我推荐保留的配置。修改tailwind.config.js可以快速定制主题module.exports { theme: { extend: { colors: { primary: { light: #5eead4, DEFAULT: #14b8a6, dark: #0f766e } } } } }4.2 暗黑模式支持现代博客的标配功能实现起来很简单// components/ThemeToggle.js import { useState, useEffect } from react; export default function ThemeToggle() { const [darkMode, setDarkMode] useState(false); useEffect(() { const isDark localStorage.getItem(darkMode) true; setDarkMode(isDark); document.documentElement.classList.toggle(dark, isDark); }, []); const toggleTheme () { const newMode !darkMode; setDarkMode(newMode); localStorage.setItem(darkMode, newMode); document.documentElement.classList.toggle(dark, newMode); }; return ( button onClick{toggleTheme} {darkMode ? ☀️ : } /button ); }记得在tailwind.config.js中启用darkModemodule.exports { darkMode: class, // ...其他配置 }5. 部署上线5.1 Vercel部署推荐在Bolt.new中导出项目代码创建Vercel账号免费拖拽项目文件夹到Vercel控制台配置环境变量如果有点击部署整个过程不超过5分钟Vercel会自动检测到是Next.js项目配置最优化的构建方案启用CDN加速配置HTTPS证书5.2 自定义域名配置在Vercel控制台进入项目设置选择Domains输入你的域名按照提示配置DNS解析避坑指南国内访问建议额外配置一个国内CDN否则加载速度可能不理想。阿里云或腾讯云的CDN都有免费额度。6. 性能优化实战6.1 图片优化Next.js内置了Image组件但需要额外配置// next.config.js module.exports { images: { domains: [images.unsplash.com], // 允许优化的图片域名 }, }使用示例import Image from next/image; Image src/profile.jpg alt作者头像 width{500} height{500} priority // 首屏图片优先加载 /6.2 代码分割Next.js自动按路由做代码分割但我们还可以优化组件级分割import dynamic from next/dynamic; const Comments dynamic( () import(../components/Comments), { loading: () p加载评论中.../p, ssr: false // 不需要服务端渲染的组件 } );7. 常见问题排查7.1 构建错误3221225477这是Windows系统常见的路径过长错误解决方案启用长路径支持管理员权限运行reg add HKLM\SYSTEM\CurrentControlSet\Control\FileSystem /v LongPathsEnabled /t REG_DWORD /d 1 /f或者将项目移到更短的路径如C:\projects7.2 样式不生效检查步骤确认Tailwind的CSS文件正确引入检查tailwind.config.js是否被正确读取确保类名没有拼写错误查看是否被更高优先级样式覆盖7.3 API路由404Next.js的API路由需要文件放在pages/api目录下默认导出请求处理方法访问路径为/api/文件名示例// pages/api/hello.js export default function handler(req, res) { res.status(200).json({ name: John Doe }); }8. 安全加固方案8.1 环境变量保护永远不要在前端代码中硬编码敏感信息// 错误做法 const API_KEY sk_live_123456; // 正确做法 const API_KEY process.env.NEXT_PUBLIC_API_KEY;然后在项目根目录创建.env.local文件NEXT_PUBLIC_API_KEYyour_key_here8.2 CSP策略配置在next.config.js中添加安全头module.exports { async headers() { return [ { source: /(.*), headers: [ { key: Content-Security-Policy, value: default-src self; script-src self unsafe-inline *.example.com; img-src self data: *.example.com; } ] } ]; } };9. 扩展功能建议9.1 评论系统推荐方案UtterancesGitHub Issues驱动GiscusGitHub Discussions驱动Disqus传统方案以Utterances为例// components/Comments.js export default function Comments() { return ( script srchttps://utteranc.es/client.js repoyourname/yourrepo issue-termpathname themegithub-light crossOriginanonymous async / ); }9.2 数据分析最简单的Google Analytics集成// lib/gtag.js export const GA_TRACKING_ID G-XXXXXXXXXX; export const pageview (url) { window.gtag(config, GA_TRACKING_ID, { page_path: url, }); }; // _app.js import { useEffect } from react; import { useRouter } from next/router; import { GA_TRACKING_ID, pageview } from ../lib/gtag; function MyApp({ Component, pageProps }) { const router useRouter(); useEffect(() { const handleRouteChange (url) { pageview(url); }; router.events.on(routeChangeComplete, handleRouteChange); return () { router.events.off(routeChangeComplete, handleRouteChange); }; }, [router.events]); return Component {...pageProps} /; }10. 维护与更新策略10.1 依赖更新建议每月检查一次依赖更新npm outdated安全更新应立即处理npm audit fix10.2 内容备份即使使用Headless CMS也应定期备份导出CMS内容为JSON提交到GitHub私有仓库存储到云存储如Google Drive自动化备份脚本示例// scripts/backup.js import { writeFileSync } from fs; import { getEntries } from ../lib/api; (async () { const posts await getEntries(post); writeFileSync(./backup/posts.json, JSON.stringify(posts)); })();11. 性能监控方案11.1 Lighthouse评分Vercel部署后会自动提供Lighthouse报告重点关注首屏时间应2s可交互时间应3.5s累计布局偏移应0.111.2 真实用户监控推荐使用开源方案// lib/metrics.js export const trackPerf () { if (PerformanceObserver in window) { const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log(entry.name, entry.duration); // 发送到分析平台 } }); observer.observe({ entryTypes: [paint, longtask] }); } }; // _app.js import { trackPerf } from ../lib/metrics; function MyApp() { useEffect(() { trackPerf(); }, []); // ... }12. 移动端优化技巧12.1 触摸反馈为按钮添加触觉反馈.btn { transition: transform 0.1s; } .btn:active { transform: scale(0.98); }12.2 防止缩放在public目录添加viewport-props.json{ viewport: widthdevice-width, initial-scale1, maximum-scale1, user-scalableno }13. 进阶功能探索13.1 离线支持通过Service Worker实现// public/sw.js self.addEventListener(install, (e) { e.waitUntil( caches.open(blog-cache).then((cache) { return cache.addAll([ /, /index.html, /styles/main.css, /script/main.js ]); }) ); }); // _app.js if (serviceWorker in navigator) { window.addEventListener(load, () { navigator.serviceWorker.register(/sw.js); }); }13.2 国际化支持Next.js内置i18n路由// next.config.js module.exports { i18n: { locales: [en, zh], defaultLocale: en, }, }创建翻译文件// locales/en.json { title: My Blog } // pages/index.js import { useRouter } from next/router; import translations from ../locales; export default function Home() { const { locale } useRouter(); const t translations[locale]; return h1{t.title}/h1; }14. 项目结构优化建议14.1 组件组织推荐结构components/ common/ Button.js Card.js layout/ Header.js Footer.js blog/ PostCard.js Tags.js14.2 样式管理Tailwind最佳实践尽量使用工具类复杂样式提取到layertailwind base; tailwind components; tailwind utilities; layer components { .special-card { apply p-6 bg-white rounded-lg shadow-xl transform transition hover:scale-105; } }15. 开发效率提升技巧15.1 代码片段VSCode配置.vscode/snippets.code-snippets{ Next Page: { prefix: npage, body: [ import { NextPage } from next;, , const ${1:PageName}: NextPage () {, return (, div, ${2}, /div, );, };, , export default ${1:PageName}; ] } }15.2 调试技巧Next.js专用调试配置launch.json{ version: 0.2.0, configurations: [ { name: Next.js, type: node, request: launch, runtimeExecutable: ${workspaceFolder}/node_modules/.bin/next, args: [dev], console: integratedTerminal, protocol: inspector } ] }16. 内容管理系统集成16.1 Strapi配置后端API示例// api/articles.js export default { async find() { return await strapi.entityService.findMany(api::article.article, { populate: [cover, author] }); } };前端调用export async function getStaticProps() { const res await fetch(http://localhost:1337/api/articles); const articles await res.json(); return { props: { articles } }; }16.2 Sanity.io方案定义内容模型schema.jsexport default { name: post, title: Post, type: document, fields: [ { name: title, title: Title, type: string }, // 更多字段... ] }17. 自动化部署流水线17.1 GitHub Actions配置name: Deploy on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-nodev2 with: node-version: 16 - run: npm ci - run: npm run build - uses: amondnet/vercel-actionv20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}17.2 预览环境配置在next.config.js中添加环境判断module.exports { env: { API_URL: process.env.NODE_ENV production ? https://api.example.com : https://staging.api.example.com } }18. 性能基准测试18.1 加载时间测试使用WebPageTest脚本// tests/performance.js const webPageTest require(webpagetest); const wpt new webPageTest(https://www.webpagetest.org); wpt.runTest(https://yourblog.com, (err, data) { console.log(data.data.median.firstView); });18.2 压力测试Artillery配置config: target: https://yourblog.com phases: - duration: 60 arrivalRate: 10 scenarios: - flow: - get: url: /19. 无障碍访问优化19.1 ARIA属性为交互元素添加button aria-labelToggle menu aria-expanded{isMenuOpen} onClick{toggleMenu} ☰ /button19.2 颜色对比度使用工具检查.text { color: #333; /* 确保与背景对比度至少4.5:1 */ }20. 项目文档编写20.1 README结构# 博客项目 ## 功能特性 - [x] 响应式设计 - [x] 暗黑模式 - [ ] 多语言支持 ## 开发指南 1. npm install 2. npm run dev ## 环境变量 NEXT_PUBLIC_API_URL - 后端API地址20.2 技术决策记录docs/ADR.md示例# 1. 为什么选择Next.js ## 状态 已采纳 ## 决策背景 需要SSR支持且希望保留React开发体验... ## 备选方案 1. Gatsby - 更适合内容型网站 2. Remix - 新兴框架生态不够成熟