Rainy Design 雨点设计工作室官网上线 | Rainy Design Studio
服务商：Rainy - Rainy Design | Rainy Design Studio 雨点设计工作室

Rainy

Next.js + Strapi + Tailwind CSS 全套实战教学

2024-10-10

检测到窗口宽度不足1024px，请使用宽屏设备浏览以获得最佳效果。

本文章的版权归属 Rainy Design Studio - 雨点设计工作室 ，且最终解释权归站长所有。
除本站自媒体官号以外，本文的禁止任一账号或平台，以任何形式转载到 RainyDesign.cn 站外。
任何个人或组织进行非法转载的，本站工作人员可对其追究法律责任。

具体信息详见条例与条款。

一、前言

1.1 关于本文

大家好，我是 Rainy Design Studio 的 Rainy，本次让我们来一起学习一套Next.js + Strapi + Tailwind CSS的成熟的网站搭建流程。由于本文要持续更新3～5个月，所以我们也说不准字数有多少、不会随着新版本的公布更新章节与内容；且由于内容过长，文章将拆分为多个片段，每段内容对应的章节量暂定为4～6篇不等。文章正在撰写中，敬请期待~

在开始前，我知道你想吐槽翻译腔，毕竟我们也有一个国际站 rainydesign.studio ，这也是为了方便翻译:P

1.2 教程简介

快速上手一套能匹配绝大多数建站需求的前端知识。

在本次课程中，你将会学到基于React的前端框架—— Next.js 的工作原理，再通过 Tailwind CSS 实现布局，以极大地减少你的样式开发耗时，而这一切都建立在一款 Headless CMS —— Strapi 之上，我们将使用它来管理你所需的所有页面数据、cookie、webhook、token等内容，以自由、不受限地布局你的页面，且无需再为后端设计感到困扰。

开始学习前，你需要具备一定的 HTML5 + CSS3 + JavaScript 知识、40～120个小时的学习与练习时间、会查阅资料自主学习（如 StackOverflow 与 Github 应该是你的常用网站），以及一点点耐心。这些硬性要求将在正文的 准备工作 章节中有一个明晰的列表供你确认。

此外，课程目录可能会随着课程推进略有调整。如果你喜欢本课程的基础内容，那么你还可以进一步学习本课程的进阶内容。

请注意， 它们都是免费的 ——当然不会按着你的脑袋浏览哪怕只有三秒钟的广告。

搜索文章内容请按下键盘上的Ctrl(Mac为Command) + F查找，
收藏文章请按下键盘上的Ctrl / Command + D加入书签栏。

1.3 教程声明

本教程面向业内人员，课程演示项目仅供学习交流使用，不得作商业用途，敬请理解。

注：本教程涉及到部分关于素材及软件的版权问题，详见条例与条款 - 免责声明。

二、教程目录

2.1 核心章节

  1. 前言：需求、目录与声明

    提到上一个教程，列出软硬件及已掌握的技术栈需求，以及学会本课程能掌握什么能力与免责声明，并讲解Strapi、Next.js与Tailwind CSS ，以及每个章节在日后的扩展内容

  2. 准备工作：项目流程、Scrum模型与项目管理常识

    讲解 Rainy Design Studio 的伙伴们有别于市场的工作流，是如何立项与推进的，再补充讲解常见的项目管理模型如ScurmScrum指一种迭代式增量软件开发过程，通常用于敏捷软件开发。
    --MBA智库，什么是Scrum    及背后支撑的知识点，讲述为什么要先做数据结构管理，再去做项目内容，以极大地减少工时浪费

  3. 准备工作：系统环境配置

    安装VSCode与Node.js，添加path，配置npm或安装cnpm，安装及配置yarn，常见问题解答

  4. 准备工作：通读设计稿 + 数据与接口设计

    解释何为数据库设计，根据设计稿的内容推导数据设计逻辑

  5. 准备工作：MySQL简介

    MySQL的基本命令如安装、初始化、启动、修改随机密码与除障，Path的可选添加，创建数据库

  6. Strapi：创建无头数据管理系统

    讲解Headless CMS与常见CMS的区别；Strapi项目的创建、注册，管理管理员账号及权限，插件商场介绍，.env的设置，入门几步走

  7. Strapi：构建数据库并管理表结构

    使用Strapi进行表结构管理（Content-Type Builder），三种大类及各个内容类型

  8. Strapi：管理多媒体资源

    Strapi媒体资源库（Media library）的使用与配置，以及strapi的public/uploads是如何存储公共静态资源的

  9. Strapi：填写内容并开放接口，讲解数据测试实用工具

    Strapi内容管理器的使用、列表浏览配置（View Settings）以及布局浏览设置（Configure the view），开放端口并在地址栏预览API；简单介绍Postman及Insomnia

  10. Strapi：REST API简介，实现增删改查及筛排分页

    了解REST API的基本工作原理，实现增删改查、筛选、排序、分页等一系列内容，以按需获取数据

  11. Next.js：创建项目并管理目录

    Next.js简介，项目的创建及设置、启用开发模式，jsconfig.json的配置以及目录结构与基本文件介绍，public目录及网站favicon替换等

  12. Next.js & Tailwind CSS: 自带Demo测试

    Next.js自带Demo演示Tailwind CSS优势，讲解tailwind.config.js配置原理与基于组件层与实用层的分层设计，Nesting CSS的添加以及图标的封装

  13. Next.js：API调用与页面渲染（SSR、SSG、CSG）

    创建.env并设置NEXT_PUBLIC_STRAPI_URL等全局变量，建立/lib文件夹并封装fetcher方法为api.js；讲解几种渲染方式的详解；在index.js中撰写Head部分以演示数据渲染，延申讲解SSRServer-side Rendering，服务端渲染与SSGStatic Site Generation，静态站点生成仅可用于页面，Components只能使用useSWR等CSRClient-side Rendering，客户端渲染渲染方式，并设置好REST API参数进行数据预处理

  14. Next.js：使用组件与路由搭建基础布局与首页

    讲解Next.js路由，@/pages及@/components文件夹的建立，Layout.js的创建，index.js的建立与测试内容

  15. Next.js：组件开发

    模拟项目的类型是企业官网。依据该类型，我们将创建Nav.js、Footer.js、Banner.js、Feature.js、Collection.js、Type.js、About.js、BlogCard.js、Tag.js、Subscribe.js等常用组件，并依据条件渲染内容

  16. Next.js + Strapi：子组件及孙组件的数据传递

    从接口获取数据并传递给子组件，以及子孙组件之间的数据传递及渲染

  17. Tailwind CSS：基本介绍、安装方式、在线演练

    介绍Tailwind CSS的特性与优势，并讲解几种安装方式：Tailwind CLI、Post CSS、框架预装及Play CDN，以及standalone的独立运行。在线演练网址：play.tailwindcss.com

  18. Tailwind CSS：预格式、预设类及参数、基本用法与任意值

    讲解Tailwind CSS的Normalize Preflight，然后详解Multiple configurations中的base对应的presets参数，并做常见的Tailwind CSS类及使用范例以及随意值的使用方法

  19. Next.js + Tailwind CSS：字体引入与优化

    讲解如何寻找免费字体并引入，并使用Next.js自带的字体优化

  20. Tailwind CSS：基于移动端的组件开发

    使用Tailwind CSS完成基于移动端的组件开发

  21. Tailwind CSS：响应式布局开发

    使用Tailwind CSS完成响应式布局开发，并完善每个页面

  22. Tailwind CSS：动效与条件渲染

    为HTML元素添加动效及渲染条件

  23. React.js：使用Hook及API进行组件传值

    useState、useContext及createContext的讲解，区分全局传值及页内传值，前者使用Layout.js存储的全局状态控制Nav.js的状态进行条件渲染，后者使用页面存储的状态并传入Nav.js，使导航文字能跟随页面内容切换高亮

  24. Next.js + Strapi：使用动态路由构建博客内页与分类页

    Strapi添加slugify依赖并添加配置到strapi/config/plugins.js，讲解/second-level/[segmentName].js动态路由，建立/blog与/category子页面并引入各个组件

  25. Next.js + Strapi + React.js：useSWR客户端渲染，实现分页与查找

    讲解useSWR的具体应用并实现CSRClient-side Rendering，客户端渲染，如Blog页面配合REST API实现分页浏览，或是实时查询博客文章，实现博客卡片栏容器的部分数据更新与客户端渲染

  26. Next.js + React.js：ReactMarkdown及插件使用

    Markdown讲解，编辑器如Obsidian、Typora推荐，或直接使用VSCode Plugin(Markdown All in One)。编辑好内容后，需在Nest.js项目中添加react-markdown、remark-gfm及rehype-raw并封装插件至"@/src/lib"，以便于渲染Markdown内容

  27. Next.js + Strapi：实现客户联络与邮件自动转发

    创建Contact.js组件并添加到Layout.js，并由后者进行状态管理，Strapi添加nodemailer依赖，plugins.js添加nodemailer配置内容，.env添加nodemailer变量，最后在strapi/src/api/contact/content-types中添加lifecycle.js，并登录邮箱开放POP3与SMTP，获取邮箱随机码做测试

  28. 原生Nesting CSS：博客正文Markdown样式美化

    在globals.css中撰写原生Nesting CSS，美化正文Markdown样式

  29. Next.js：自定义错误页面如404、500等

    创建404.js与500.js页面并填写内容

  30. Next.js：创建sitemap.xml文件并自动获取内容

    在sitemap.xml.js中撰写自动生成代码

  31. 网站部署：Cloudflare、Vercel或租赁云服务器

    使用Cloudflare或Vercel等做一键部署，或租赁云服务器

  32. 网站部署：注册域名 + SSL证书申请

    用腾讯云做演示。如使用上述托管方案则无需手动申请SSL，Vercel会默认提供SSL服务

  33. 搜索引擎提交收录

    谷歌GSC提交以及百度站长工具，以及Facebook Pixel、Trustpilot等第三方script的接入

  34. 资源与教程项目包下载

    项目文档必须科学上网Github上获取；其他资源详见页尾

  35. 常见疑问解答

    本博客的评论功能我们暂不开启。如你想洽谈合作或存在各种疑问，请关注我们的微信公众号 RainyDesign 并在后台留言、关注B站账号 RainyDesign雨点设计 发送私信，或者给我们发邮件：RainyDesignStudio@outlook.com

2.2 进阶学习

2.2.1 Strapi 进阶讲解

  1. Strapi：REST API进阶知识

    深度筛选与复杂的填充筛选等参数的集合使用

  2. Strapi：src文件与模板

    如何编辑json文件快速创建与修改内容编辑器接口，以及自定义一套预设好的template以协助创建Strapi内容结构

  3. Strapi：插件市场介绍与安装、插件配置

    具体访问Strapi Plugin Marketplace并进行介绍

  4. Strapi：Webhook与Token介绍

    配合Next.js 实现基于权限的登陆与访客留言功能，以作案例讲解

  5. Strapi：后台自定义

    以官方的FoodAdvisor Demo为例讲解如何自定义后台

  6. Strapi：数据管理，如导入、导出与迁移

    yarn strapi export --file my-strapi-export等命令详解

  7. ……

2.2.2 Next.js 进阶讲解

  1. Next.js：内容优化 - 静态资源、懒加载与第三方库

    讲解Next.js是如何优化图片、文字等多媒体资料与Scripts等内容以及懒加载并做示例，介绍第三方库如Google Tag Manager、Analytics、Google Maps Embed、YouTube Embed等等

  2. Next.js：草稿(Draft)与预览(Preview)模式

    讲解如何在Next.js中开启草稿与预览

  3. Next.js：Components介绍

    讲解Head、Image、Link与Script，并做使用示例

  4. Next.js：nextjs.config.js 配置项

    介绍常见的配置项，如重定向、重写、运行时配置等等

  5. Next.js：内置方法

    除了先前提到的渲染方法以外，额外讲解useRouter、userAgent、useAmp等内置方法

  6. ……

2.2.3 Tailwind CSS 深度讲解

  1. Tailwind CSS：进一步讲解分层设计

    深度讲解base、components与utilities层，实现类名的分层管理

    • 案例：通过分层构建你的component与utilities库，以及自定义默认的字体属性
  2. Tailwind CSS：配置文件详解

    详解项目根目录下的tailwind.config.js中的content、safeList、theme、theme.extend、plugins等常用对象，并补充讲解prefix、important、separator以及corePlugin等知识内容

  3. Tailwind CSS：Nesting CSS、函数与指令

    讲解Nesting CSS是如何在Tailwind CSS中工作的，并详解常见的directives与functions以及其使用方法

    • 案例：一个简易美观的的Nesting CSS组件，并结合directives与functions实现
  4. Tailwind CSS：响应式设计、选择器、伪类与状态

    讲述基于移动端的Responsive Design、媒体查询代码以及符合Tailwind CSS标准的设计稿，并介绍Tailwind CSS的各类选择器如Group及Peer等，以及伪类与状态

    • 案例：在不同分辨率下涉及不同交互逻辑的插件
  5. Tailwind CSS：主题以及追加设置、深色模式

    讲解Tailwind CSS Default Theme内容、如何变更及追加设置theme.extend，以及Darkmode

    • 案例：定制自己的Theme，以及Darkmode的具体应用
  6. Tailwind CSS：基于React hooks及数据传值的组件状态与交互动画

    演示一个范例，讲解如何使用useState或依据传入的数据改变组件状态，并详解条件渲染的Tailwind CSS类、基于组件层封装的Nesting CSS及@Apply应用的三步走

  7. ……

内容仍在更新中，文章即将发布，敬请期待！

Rainy Design @ 2025