Guide & Tutorials cover | Rainy Design Studio

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

Website DevelopmentReactNext.JSTailwind CSSTutorialStrapi

Rainy, Oct 10, 2024

Copyright of this article belongs to Rainy Design Studio, and the site administrator reserves the right of final interpretation.
Unauthorized reproduction or distribution of this content on any external platform or account is strictly prohibited, with the sole exception of our official social media channels.
We reserve the right to pursue legal action against any individual or organization for copyright infringement.
For more details, please refer to our Terms and Conditions.

一、前言

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、CSR）

    创建.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. ……

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

Subscribe us

Unlock deeper insights to advance your frontend technologies and web design expertise.