除本站自媒体官号以外，本文的内容禁止任一组织、个人、账号或平台，以任何形式转载到 RainyDesign.cn 站外。
任何个人或组织进行非法转载的，本站工作人员可对其追究法律责任。
具体信息详见 条例与条款 。
Next.JS + Strapi + Tailwindcss 全套网建实战教学 —— 前言：需求、目录与声明
使用 Next.JS 与 Tailwind CSS 快速搭建你的网站，并借由 Strapi 构建你的内容管理系统。
一、前言
1.1 写在前面
大家好，我是 Rainy Design Studio 的 Rainy，本次让我们来一起学习一套 Next.JS + Strapi + Tailwind CSS 的成熟的网站搭建流程。
由于本文要持续更新 3～5 个月，所以我们也说不准字数有多少、不会随着新版本的公布更新章节与内容；且由于内容过长，文章将拆分为多个片段，每段内容对应的章节量暂定为4～6篇不等。
好吧，这篇教程从 2025 年 5 月断断续续写到 12 月终于是写完了，甚至横跨了 Next.JS v15 ~ v16 两个版本，庆幸的是 v16 的改动不多，共计 4 万多字，配合视频食用效果更佳（别催啦，已经在剪了）。
转眼就来到 2026 年了，春节前后穿插项目和官网升级，加上本教程需要大量的资料从视频截图与公网获取，又断断续续花了好几个月才赶上。
即便对照视频，具体也务必以本博客图文为准，毕竟写代码难免有修修改改，博客更新容易、但每次都重新剪视频就有些不现实了。
可能你会吐槽部分文本的翻译腔，毕竟我们也有一个国际站 rainydesign.studio ，这也是为了方便后续翻译嘛（在做了在做了） :P
1.2 教程简介
快速上手一套能匹配绝大多数建站需求的前端知识。
在本次课程中，你将会学到基于 React 的前端框架—— Next.JS 的工作原理，再通过 Tailwind CSS 实现布局，以极大地减少你的样式开发耗时，而这一切都建立在一款 Headless CMS （无头内容管理系统） —— Strapi 之上，我们将使用它来管理你所需的所有页面数据、cookie、webhook、token等内容，以自由、不受限地布局你的页面，且无需再为后端设计感到困扰。
开始学习前，你需要具备一定的 HTML5 + CSS3 + JavaScript 知识、36~48 个小时的学习与练习时间、会查阅资料自主学习（如 StackOverflow 与 Github 应该是你的常用网站），以及一点点耐心。这些硬性要求将在正文的 准备工作 章节中有一个明晰的列表供你确认。
此外，课程目录可能会随着课程推进略有调整。如果你喜欢本课程的基础内容，那么你还可以进一步学习本课程的进阶内容。
请注意：课程内用作演示的项目更倾向于技术讲解，而非尽可能兼容常见的项目需求，也就是说，某些看上去不符合实际需求的模块是我们刻意设计的，旨在演示一个适配当前框架的应用实例。
值得一提的是， 它们都是免费的 ——当然不会按着你的脑袋浏览哪怕只有三秒钟的广告。
收藏文章请按下键盘上的Ctrl / Command + D加入书签栏。
1.3 能力需求
以下枚举了学习本教程所需的技能板块及对应的能力需求。
开发基础
- 熟练掌握开发程序的使用，如 VSCode 或 Atom 等等；
- 熟练运用一种常见系统上的终端，且能独立配置环境变量；
- 习惯独立解决问题，遇事不决先自查 Github 或 StackOverflow 等等。
前端常识
- 熟练掌握 html5 与 CSS3，对原生 Javascript 有一定了解；
- 至少熟悉一套前端框架，如 Vue 2 加 Bootstrap 或 Less ；
- 熟练运用浏览器内的开发者工具以做网页调试。
1.4 学习目标
- 完成基于 React 与 Next.JS 框架的静态网站搭建
- 使用 Tailwind CSS 还原响应式布局及常见样式与动效
- 使用 Strapi 管理静态资源并存储数据
- 使用 REST API 获取数据并渲染页面
- 基于 CentOS 或 Cloudflare / Vercel 托管的网站上线工作
1.5 教程声明
本教程面向业内人员，课程演示项目仅供学习交流使用，不得作商业用途，敬请理解。
注：本教程涉及到部分关于素材及软件的版权问题，详见 条例与条款 - 免责声明 。
二、教程目录
2.1 核心章节
-
提到上一个教程，列出软硬件及已掌握的技术栈需求，以及学会本课程能掌握什么能力与免责声明，并介绍 Strapi 、 Next.JS 与 Tailwind CSS ，以及每个章节在日后的扩展内容
-
讲解学习本课程所需具备的软硬件条件，并做好初期配置工作、搭建开发环境
-
讲解 Rainy Design Studio 的伙伴们有别于市场的工作流，是如何立项与推进的，讲述为什么要先做数据结构管理，再去做项目内容，以极大地减少工时浪费
-
解释何为数据库设计，根据设计稿的内容推导数据设计逻辑
-
MySQL 的基本命令如安装、初始化、启动、修改随机密码与除障，Path 的可选添加，创建数据库
-
讲解 Headless CMS 与常见 CMS 的区别；Strapi 项目的创建、注册，管理管理员账号及权限，插件商场介绍，
.env的设置，入门几步走 -
使用 Strapi 进行表结构管理（Content-Type Builder），三种大类及各个内容类型
-
Strapi 媒体资源库（Media library）的使用与配置，以及 Strapi 的
public/uploads是如何存储公共静态资源的 -
Strapi 内容管理器的使用、列表浏览配置（View Settings）以及布局浏览设置（Configure the view），开放端口并在地址栏预览 API；简单介绍 Insomnia
-
Strapi：REST API 简介，实现增删改查及筛排分页
了解 REST API 的基本工作原理，实现增删改查、筛选、排序、分页等一系列内容，以按需获取数据
-
Next.JS 简介，项目的创建及设置、启用开发模式，
jsconfig.json的配置以及目录结构、公共目录与基本文件介绍 -
有别于 Next.JS 的 APP 路由，此处讲解页面路由（Page router）逻辑，自定义
_app.js、_document.js，创建布局文件Layout.js并建立导航 -
Next.JS：API 函数与页面渲染（SSR、SSG、CSR）
执行 Next.JS 项目建站的一些必要工作，比如创建
.env并设置全局变量、建立/lib文件夹、封装fetcher方法等；讲解几种渲染方式：SSRServer-side Rendering，服务端渲染与SSGStatic Site Generation，静态站点生成仅可用于页面，Components 只能使用useSWR等CSRClient-side Rendering，客户端渲染；创建各类页面，并为各类页面中的渲染函数设置好 REST API 参数，以获取特定数据为后续课程做准备 -
讲解 Next.JS 项目的官方内建组件如 Next Image 、 Next Link 、 Next Head 等，以及引用 CSS 和 Google Fonts 或本地字体
-
模拟项目的类型是企业官网；我们依据该类型创建各类常用组件，从接口获取数据并传递给子孙组件并渲染为 HTML
-
介绍 Tailwind CSS 的原子类优先（utility-first）设计理念，讲解其与传统 CSS 框架的区别；演示安装配置流程，包括 PostCSS 配置、
tailwind.config.js设置、全局样式导入等；介绍 Tailwind CSS v4 的新特性及从旧版本升级的注意事项 -
通过水晶球等实战案例展示 Tailwind CSS 的强大功能；讲解核心概念如响应式设计、状态变体（hover、focus 等）、暗黑模式、自定义主题配置等；通过实际演练掌握常用工具类的组合使用技巧
-
使用
@layer指令创建可复用的全局样式；开发常用组件如按钮、表单、卡片等的基础样式；讲解如何在globals.css中定义自定义工具类和组件类，实现项目级别的样式统一管理 -
实战开发网站的主要页面布局，包括首页、博客列表页、文章详情页、关于页面等；运用 Flexbox 和 Grid 布局系统构建响应式设计；实现导航栏、页脚、侧边栏等常见布局模块，完成整站视觉效果
-
总结 Tailwind CSS 章节的核心知识点；回顾常用工具类、配置技巧、最佳实践；提供速查表和常见问题解答；为后续项目开发打下坚实基础
-
React.JS (JSX)：使用 ReactMarkdown 插件美化正文
安装并配置 ReactMarkdown 及相关插件（如 remark-gfm、rehype-raw 等）；实现 Markdown 内容的渲染，支持代码高亮、表格、自定义组件等功能；为博客文章内容提供丰富的排版效果
-
实现博客文章的全文搜索功能；使用 Strapi 的过滤器 API 进行服务端搜索；创建搜索页面，处理搜索表单提交、URL 参数管理、搜索结果展示；优化用户体验，添加加载状态和错误处理
-
使用 Strapi 的分页 API 实现文章列表分页；创建分页组件，支持页码跳转、上一页/下一页导航；处理动态路由和 URL 参数；优化 SEO，为分页添加正确的 meta 标签和 canonical 链接
-
Next.JS：为 SSG 页面设置 ISR 以实现性能优化与预生成
讲解增量静态再生成（ISR）的工作原理和应用场景；通过
revalidate参数实现页面的定时更新；对比 SSG、SSR 和 ISR 的性能差异；为博客文章和列表页面配置合适的重新验证策略，平衡性能与内容时效性 -
Strapi Lifecycles hooks：客户联络自动转发邮件
介绍 Strapi 的生命周期钩子（Lifecycle hooks）机制；配置邮件服务（如 Nodemailer）；创建联系表单的后端逻辑，在数据创建时自动发送邮件通知；实现表单提交的完整流程，包括数据验证、错误处理和用户反馈
-
创建自定义的 404 和 500 错误页面；使用
getStaticProps获取全局数据；设计友好的错误提示界面，提供返回首页等导航选项；讲解_error.js的工作机制，处理各种类型的错误状态 -
Next.JS：创建 sitemap.xml 和 robots.txt 文件并自动更新
创建动态生成的 sitemap.xml，自动包含所有文章和页面；配置 URL 优先级、更新频率和最后修改时间；创建 robots.txt 文件，正确引用 sitemap；添加缓存控制，优化搜索引擎爬取效率；提升网站 SEO 表现
-
网站部署：Cloudflare、Vercel 或租赁云服务器（撰写中）
使用 Cloudflare 或 Vercel 等平台进行一键部署，或租赁云服务器进行自主部署
-
暂时调用往期教程，日后进一步完善。 用腾讯云做演示。如使用上述托管方案则无需手动申请 SSL，Vercel 会默认提供 SSL 服务。
-
搜索引擎提交收录（撰写中）
谷歌 GSC 提交以及百度站长工具，以及 Facebook Pixel、Trustpilot 等第三方 script 的接入
-
项目文档必须科学上网在 Github 上获取（晚点上传）；其他资源详见页尾，下载教程资源包请 点击此处 。
-
常见疑问解答（即将开放）
本博客的评论功能我们暂不开启。如您想洽谈合作或存在各种疑问，请关注我们的微信公众号 RainyDesign 并在后台留言、关注 B 站账号 RainyDesign 雨点设计 发送私信，或者给我们发邮件：RainyDesignStudio@outlook.com
2.2 进阶学习
2.2.1 Strapi 进阶讲解
相关文档：Strapi 开发指南
下列内容仍在准备，敬请期待。
- Strapi：API 进阶知识
深度筛选与复杂的填充筛选等参数的集合使用，以及 Query String 库的使用
- Strapi：i18n（国际化设置）
了解如何开启 i18n、为语言设置权限，并通过 API 获取数据
- Strapi：草稿 (Draft) 、预览 (Preview) 与本地 md 文件预览
讲解如何在 Strapi 中开启草稿与预览，以及如何配合 Next.js 渲染草稿预览页，或是直接读取本地 markdown 文件进行预览
- Strapi：src 文件与模板
如何编辑 json 文件快速创建与修改内容编辑器接口，以及自定义一套预设好的 template 以协助创建 Strapi 内容结构
- Strapi：插件市场介绍与安装、插件配置
具体访问 Strapi Plugin Marketplace 并进行介绍
- Strapi：Webhook 与 Token 介绍
配合 Next.JS 实现基于权限的登陆与访客留言功能，以作案例讲解
- Strapi：数据管理，如导入、导出与迁移
yarn strapi export --file my-strapi-export等命令详解，并迁移到面面俱到的 PostgreSQL。 - ……
2.2.2 Next.JS 进阶讲解
下列内容仍在准备，敬请期待。
- Next.JS：配置 ISR 及 ODR
讲解如何配置 ISR 以定期获取数据渲染静态页面，并为部分页面执行按需 ISR
- Next.JS：结构化数据
讲解如何位各页面添加符合 Google Rich Results 规范的 Schema Markup
- Next.JS：内容优化
讲解 Next.JS 是如何优化图片、文字等多媒体资料的，包括为 LCP 内容添加 priority、quality 等参数等等
- Next.JS: 全局注入
讲解如何注入第三方 JS， 如 Google Tag Manager、Analytics、Google Maps Embed、YouTube Embed 等等
- Next.JS：正文优化
讲解如何进一步优化 markdown 逻辑，并为博客正文增添侧边栏目录
- Next.JS：OG image
讲解如何使用 vercel/og 设计并灵活配置你的分享图片
- Next.JS：i18n 适配
讲解如何配置 Next.JS 中各页面的 API 与 config 中的设置，以实现单域名或多域名情况下的 i18n 数据渲染
- ……
2.2.3 Tailwind CSS 深度讲解
相关文档：Tailwind CSS 开发指南
下列内容仍在准备，敬请期待。
- Tailwind CSS：进一步讲解分层设计
深度讲解 base、components 与 utilities 层，实现类名的分层管理
- 案例：通过分层构建你的 component 与 utilities 库，以及自定义默认的字体属性
- Tailwind CSS：配置文件详解
详解项目根目录下的tailwind.config.js中的content、safeList、theme、theme.extend、plugins等常用对象，并补充讲解prefix、important、separator以及corePlugin等知识内容
内容已过时，请以 Tailwind CSS v4 的最新标准为准 - Tailwind CSS：Nesting CSS、函数与指令
讲解 Nesting CSS 是如何在 Tailwind CSS 中工作的，并详解常见的 directives 与 functions 以及其使用方法
- 案例：一个简易美观的的 Nesting CSS 组件，并结合 directives 与 functions 实现
- Tailwind CSS：响应式设计、选择器、伪类与状态
讲述基于移动端的 Responsive Design 、媒体查询代码以及符合 Tailwind CSS 标准的设计稿，并介绍 Tailwind CSS的各类选择器如 Group 及 Peer 等，以及伪类与状态
- 案例：在不同分辨率下涉及不同交互逻辑的插件
- Tailwind CSS：主题以及追加设置、深色模式
讲解 Tailwind CSS Default Theme 内容、如何变更及追加自定义以及深色模式
- 案例：定制自己的Theme，以及Darkmode的具体应用
- Tailwind CSS：基于 React hooks 及数据传值的组件状态与交互动画
演示一个范例，讲解如何使用 useState 或依据传入的数据改变组件状态，并详解条件渲染的 Tailwind CSS 类、基于组件层封装的 Nesting CSS 及 @Apply 应用的三步走
- ……
2.2.4 其他学习内容
用于配合本课程的各类知识补充，有些是我自己一点点记录的笔记，还有些则是 LLM 生成或辅助整理的。目前仍在补充完善，敬请期待。
三、开始学习
请 点击此处 下载课程资源包，然后点击上述任意高亮的标题跳转至对应章节，或者 点击这里 开始从头学习。
如需安装 Adobe XD，请访问下述链接下载：
3.1 相关工具
本教程中所使用到的所有工具与软件请于下表自取：
| 软件 | 类型 | 官网链接 | 用于 |
|---|---|---|---|
Node.JS | 运行环境 | nodejs.org | 运行 JavaScript 后端项目与管理依赖包 |
VSCode | 软件 | visualstudio.com | 编写与编辑代码的轻量级集成开发环境 |
Tailwind CSS IntelliSense | VSCode 插件 | 请于插件市场内搜索 | 提供 Tailwind 类名自动补全、高亮与提示 |
Live Server | VSCode 插件 | 请于插件市场内搜索 | 本地静态网页的实时自动刷新与预览 |
Tailwind Standalone | 独立程序 | github.com | 在无 Node 环境下本地编译 Tailwind 样式 |
Insomnia | 软件 | insomnia.rest | 测试与调试 REST、GraphQL 等各类 API 接口 |
Arc Browser | 网页浏览器 | arc.net | 高效分栏与空间管理的现代化网页浏览工具 |