指南与教程 - 背景图片 | Rainy Design Studio

Next.js + Strapi + Tailwind CSS 建站教程 - 第一部分

Tailwind CSSNext.JSStrapi教程网站开发

Rainy, May 26, 2026

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

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

Next.JS + Strapi + Tailwind CSS 全套网建实战教学 —— 准备工作

满足基本需求、了解项目流程、设计接口、配置 MySQL 并创建数据库。

章节回顾

本文是本教程的第一个正式章节，包含了准备工作的所有内容。课程的完整目录如下：

  1. 准备工作

    📌 当前位置
    1. 准备工作：基本需求
    2. 准备工作：项目流程
    3. 准备工作：通读设计稿 + 数据与接口设计
    4. 准备工作：MySQL简介

  2. Strapi
    1. Strapi：创建无头数据管理系统
    2. Strapi：管理数据库表结构
    3. Strapi：管理多媒体资源
    4. Strapi：填写内容、配置 API 权限并测试
    5. Strapi：REST API 讲解，实现增删改查及筛排分页
    6. Strapi：章节知识点汇总

  3. Next.JS
    1. Next.JS：创建项目并管理目录
    2. Next.JS：管理路由，搭建基础布局与页面
    3. Next.JS：API 函数与页面渲染（SSR、SSG、CSR）
    4. Next.JS：内建组件与资源引用
    5. Next.JS + Strapi：开发与数据传递
    6. Next.JS：章节知识点汇总

  4. Tailwind CSS
    1. Tailwind CSS：简介、安装、新特性与旧版本升级
    2. Tailwind CSS：示例、核心概念与演练
    3. Tailwind CSS：全局组件样式开发
    4. Tailwind CSS：主要页面布局实战
    5. Tailwind CSS：章节知识点汇总

  5. 细节完善
    1. React.JS (JSX) ：使用 ReactMarkdown 插件美化正文
    2. Strapi + Next.JS + JSX：博客文章搜索
    3. Strapi + Next.JS + JSX：文章列表分页
    4. Next.JS：为 SSG 页面设置 ISR 以实现性能优化与预生成
    5. Strapi Lifecycles hooks：客户联络自动转发邮件
    6. Next.JS：自定义错误页面如 404、500
    7. Next.JS：创建 sitemap.xml 文件并自更新

  6. 网站部署 (撰写中)

    1. 网站部署：Cloudflare、Vercel或租赁云服务器（仍在撰写）

    2. 网站部署：注册域名 + SSL证书申请（仍在撰写）

    3. SEO：搜索引擎提交收录（仍在撰写）

  7. 资源与教程项目包下载
    点击此处下载，最后更新于：2026 年 5 月 26 日。为获取良好的学习体验，请务必以最新版本为主！
  8. FAQ（常见疑问解答）

一、准备工作

1.1 基本需求

大家好，我是Rainy。本课程主要讲解 Next.JS、Tailwind CSS 及 Strapi 的相关知识，目标结果为熟练运用这三个核心框架以独立搭建网站；课程适用于前端工程师、UI 设计师或网页设计师的知识拓展，共计学习+练习时长约为50小时。

在开始前，我们需要确认一系列需求与配置工作：

能力要求

前端基础： 精通原生 HTML5、CSS3、JavaScript；

项目经验： 至少掌握 Angular、React、Vue 之中的一项；

独立思考： 会科学上网查资料，出现问题第一时间在社区找答案。

开发环境配置

系统： MacOS Monterey / Windows 10 / Ubuntu 22.04 LTS 或更新版本

最小内存： 8GB 及以上，且确保至少空闲 4GB

推荐内存： 16GB 及以上，且确保至少空闲 12GB

可用外存： 5GB 及以上

生产环境配置

系统： Windows Server 2019 / CentOS 7 或更新版本

最小内存： 4GB 及以上，且确保至少空闲 2.5GB

推荐内存： 8GB 及以上，且确保至少空闲 6GB

可用外存： 10GB 及以上

此外考虑到项目版本的兼容性，我们需要切换 Node.js 的各类版本。我们建议安装 nvm 便于管理多版本切换：

MacOS

  • 打开 Terminal，使用 curl 下载并安装 nvm： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
    • 或者使用 wget： wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
  • 安装完成后，重启终端或执行 source ~/.bashrc 或 source ~/.zshrc（取决于你使用的shell）；
  • 在 Terminal 中输入 nvm --version 并回车确认版本号；
  • 使用 nvm install node 安装最新版本的 Node.js，或使用 nvm install 18.20.0 安装指定版本。
  • 使用 nvm use 18.20.0 切换到指定的 Node.js 版本。

Windows

  • Windows 需要使用 nvm-windows，请访问 GitHub发布页面 下载最新版本的 nvm-setup.zip；
  • 解压并运行 nvm-setup.exe 安装程序，建议安装到自定义目录如 D:\Tools\nvm\；
  • 安装完成后，打开新的 PowerShell 或 Command Prompt 窗口；
  • 输入 nvm version 确认 nvm 安装成功；
  • 使用 nvm install latest 安装最新版本的 Node.js，或使用 nvm install 18.20.0 安装指定版本；
  • 使用 nvm use 18.20.0 切换到指定的 Node.js 版本。

Linux (以Ubuntu为例)

  • 打开终端，使用 curl 下载并安装 nvm： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
  • 或者使用 wget： wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
  • 重新加载 bash profile：source ~/.bashrc 或重启终端；
  • 输入 nvm --version 确认安装成功；
  • 使用 nvm install node 安装最新版本的 Node.js，或使用 nvm install 18.20.0 安装指定版本；
  • 使用 nvm use 18.20.0 切换到指定的 Node.js 版本。

1.2 项目流程

有别于常规网建流程，我们的网建项目流程是异步进行的，即原型图一旦确认，我们就会在项目需求文档中提供一个内容表单，并由甲方对接人员填写表单直至内容完善；我们通常不填测试内容，而是直接真实数据接入网站，这样做能规避不确定性因素，因而减少项目需求的变动、压缩整个项目耗时。而对内的优点则包括：

  • 可直接向PM提交，运用于PRD的字段页面；
  • 数据库建档阶段便于操作，无需繁复翻看设计稿。

以主页的 banner 为例，这个内容表单通常长这样子：

需求内容表单片段
一级类目二级类目内容
横幅标题MAKING POSSIBLE.
描述Hold tight!
We’re racing ahead with cutting-edge web technologies to lead the industry.
按钮文本Start Guide >>
按钮链接...
技术栈StrapiThe open-source Headless CMS for developers that makes API creation easy.
Next.JSCreate high-quality web applications with the power of React components.
Tailwind CSSA utility-first CSS framework packed with semantic classes, directly in your markup.

甲方在确认完线框稿之后就可以逐步着手填写内容了。

1.3 通读设计稿 + 数据与接口设计

基于异步推进的项目流程理念，我们需要先把页面所有的数据类型于开发前确认完毕；现在请下载 课程资源包 并解压，然后 点击此处 下载并安装 Adobe XD ，然后打开 guide_of_next_js_strapi_tailwind_css.xd 。让我们一起来解读下设计稿：

(关于页 About Us 数据类型 - 桌面端 - Next.JS + Strapi + Tailwind CSS 课程参考案例 | Rainy Design Studio 雨点设计工作室

关于页 Information 数据类型 - 桌面端

(关于页 About Us 数据类型 - 移动端 - Next.JS + Strapi + Tailwind CSS 课程参考案例 | Rainy Design Studio 雨点设计工作室

关于页 Information 数据类型 - 移动端

此处以关于页入口为例，对照移动端与桌面端两个部分，我们可以代入 HTML 盒模型开发思维进行信息分析，其中包括了以下数据内容：

  • 标题
  • 描述文本
  • 代码片段
  • 按钮文本
  • 按钮链接
  • 图片

对应需求列表中一一填写的内容，我们可以将其铺平为更加方便阅读的表格，并规范化填写表单，便于开发人员阅读：

名称类型参数缺省值提示
headingtextrequired--
descriptiontextarearequired--
buttonTexttextrequired--
buttonLinktextrequired--
openInNewTabbooleanrequired--
imagemediasingle; image only-Recommended resolution:...

这里我们不难注意到页面上的数据相当多，所以我们直接起一个数据字段表作对照，以便运用于后续的接口创建工作；点击此处 以参阅字段列表。不过现在不急着阅读理解，后续课程会用到该文档。

我们可以为 Adobe XD 安装一些插件来提升工作效率：

XD 插件作用
Rename It快速对多个图层命名
Copy CSS from panel从图层快速复制 CSS
Copy HTML/CSS快速拷贝完整的 HTML 以及 CSS
Texts Selector从选择内容中选定所有文字类型的图层

此外，为了方便查阅设计稿，我们简单记几个 Adobe XD 的操作事项：

操作快捷键
拖拽视图按住鼠标滚轮 / 触摸板双指滑动 / 按住空格键 + 鼠标左键
缩放视图⌘ / CTRL + - / + 或 ⌘ / CTRL + 鼠标滚轮滚动
撤销操作⌘ / CTRL + z
重做操作⌘ / CTRL + ⇧ / SHIFT +z
进入子图层双击图层
查看图层边距按住 ⌥ / ALT
图层侧边栏⌘ / CTRL + Y
导出图层⌘ / CTRL + E

1.4 MySQL 简介

完成数据类型的设计后，我们就可以接入 MySQL 并创建数据库了。

使用 PostgreSQL 的小伙伴们可在后续课程中学习到如何将数据导出并迁移（Strapi 应用层面，而非数据库层面）

1.4.1 安装 MySQL

MacOS

  • 确保你的电脑上已安装了 Homebrew，如果没有请打开 terminal，复制粘贴以下内容并回车，然后输入用户密码开始安装： /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 安装完成后请再在 terminal 中输入 brew -v 并回车确认版本号；
  • 在 terminal 中输入 brew install mysql@8.3 以安装 MySQL8.3；
  • 再在 terminal 中输入 mysql --version 以确认 MySQL版本号。

Windows

  • 和 MacOS 一样，可以在 Powershell 中用 Chocolatey 安装，但 Windows 下载安装包更方便：点击此处 打开下载页面，选择 8.3.0 下载即可。
  • 下载完毕后，在安装阶段最好变更一下安装目录，如 D:\Projects\MySQL\MySQL8.3.0\ ，然后继续执行安装直至完成；
  • 打开开始菜单，在设置中选择“关于”，然后依次点开高级系统设置——高级——环境变量，在用户路径中添加上述设置好的路径下的 bin\ 子路径，如 D:\Projects\MySQL\MySQL8.3.0\bin 到 Path;
  • 到 Powershell，输入 mysql --version 以获取 MySQL 版本号。

Linux (以CentOS为例)

  • CentOS 7 及后续版本预装了 dnf 以替代 yum，可直接执行 sudo dnf module install mysql:8.3 开始安装；
  • 安装完毕后，输入 mysql -V 以获取 MySQL 版本号。

1.4.2 建立数据库

本步骤仅第一步有区别：

MacOS / Linux (以CentOS为例)

  • 如果你遵循先前的步骤，使用 homebrew 安装了 MySQL，请直接输入 brew services start mysql 配置 LaunchAgent 以启动 MySQL 服务（同时注册开机自启动等）。
  • 如用 yum 或 dnf 安装的则可直接使用 sudo systemctl start mysqld 启动。

Windows

  • Windows 系统如果是下载的非安装版，比如从其他地方直接拷过来或 curl 下来的压缩包，解压到指定目录后在 Powershell 中定位到 mysql\bin 目录，并执行 .\mysqld --install 进行安装；
    • 仅 Windows OS 可使用 .\mysqld --install <server-name> 来指定一个服务名，此后便可使用 net start <server-name> 来运行特定的服务。
  • 执行 .\mysqld --initialize --console 以初始化数据库，并复制随机密码；
  • 输入 net start mysql 以启动服务，以及 net stop mysql 以停止服务。

后续均为在 MySQL 中执行命令行，所以命令是共通的：

  • mysql -u root -p 登陆 MySQL 服务，会提示输入密码，将刚才的随机密码输入即可。请注意，现在需使用 MySQL 命令行，所有内容都必须追加半角分号 ; 在末尾才可回车执行；
  • set password = password('your-password'); 并回车以修改密码；
  • alter user 'root'@'localhost' password expire never; 并回车使密码永不过期；
  • flush privileges; 并回车以刷新权限；
  • exit; 并回车以退出，成功会看到 Bye 并且返回 Terminal 界面；
  • 再次输入 mysql -u root -p 以登陆 MySQL 服务，使用新密码登陆；
  • 如有需要，可以输入 SHOW DATABASES; 以查看数据库；
  • 使用 MySQL 命令行 CREATE DATABASE `my-project` 创建一个名为 my-project 的数据库；
    • 请注意：带有破折号 - 的数据库名必须包裹在双反引号 `` 之中，否则 MySQL 立马会报语法错误。
  • exit; 退出 MySQL 即可。





准备工作已经就绪，现在我们可以安装 Strapi 以管理数据及接口了。

课程链接：Strapi：创建无头数据管理系统

订阅

解锁深度且前沿的前端技术、设计理念与用户交互探寻之道。