第二课，安装strapi 与next.js 到本地并测试启动

一，安装strapi后端 到本地


Strapi 不需要手动下载源码文件，而是通过 npm/pnpm 的 create-strapi-app 工具直接生成项目。

该工具会从 npm 仓库拉取最新版 Strapi（当前为 4.x 版本），自动配置。因此安装会通过cmd 的命令符完成

进入 cms 目录：
在 cmd 中：
cmd

cd C:\Node\test-example\packages\cms

安装 Strapi：
使用 pnpm 创建项目：
cmd

npx create-strapi-app@latest --quickstart  安装最新版 


说明：
npx：执行 npm 包，无需预装。

. ：在当前目录（cms）安装。

--quickstart：使用 SQLite 数据库（本地测试用），自动启动。

过程：下载并安装依赖（约几分钟，视网络速度）。
完成后，Strapi 会自动运行并打开浏览器至 http://localhost:1337/admin。

注意事项：
1.中间会遇到提示安装点击y ，会提示是否登录使用官网云账户登录，用箭头点击skin !
2.安装完成跳转到http://localhost:1337/admin 不要关闭cmd窗口，注册账号并登录到后台，
3.如何重启？定位到目录 cd C:\Node\test-example\packages\cms  然后 cmd    npm run develop




二，汉化strapi 后台

1.新建一个文件并进入src/admin/app.js写入以下内容

const config = {
  locales: ["zh-Hans"],
};

const bootstrap = (app) => {
};

export default {
  config,
  bootstrap,
};


2.打开Settings->Internationalization 设置中文包

3.重启服务后，点击个人头像，就能看到中文设置选项。

具体教程https://www.chengzz.com/posts/1262





三，安装next.js前端到本地


1.进入目录
cd C:\Node\test-example\packages\website

2.开始命令安装
npx create-next-app@latest . --typescript --tailwind --eslint

.：在当前目录（website）安装。

--typescript：使用 TypeScript（推荐，类型安全）。

--tailwind：集成 Tailwind CSS（快速样式开发）。

--eslint：添加代码检查工具。



界面提示
Would you like your code inside a src/ directory?（是否将代码放在 src/ 目录？） yes
理由：你的 monorepo 已使用 src/（如 Strapi 的 cms/src/），保持一致性更好，且便于未来扩展。
Would you like to use App Router? (recommended)（是否使用 App Router？）yes
理由：Next.js 官方推荐 App Router，未来是主流趋势。与 Strapi 集成无额外复杂性，且支持更灵活的内容展示
Would you like to use Turbopack for next dev?（是否在 next dev 使用 Turbopack？）no
理由：Turbopack 虽快，但不够成熟，可能遇到兼容性问题。Webpack 更稳定，适合初次使用。
Would you like to customize the import alias (@/* by default)?（是否自定义导入别名，默认 @/*？）no
理由：默认 @/* 已足够好用，无需额外定制。若选 Yes，可输入 @/*（保持默认）。

3.验证安装成功

npm run dev

浏览器访问 http://localhost:3000：
若看到 Next.js 欢迎页面（默认模板），说明安装成功。
目录结构
安装后，C:\Node\test-example\packages\website 应包含：

website/
├── app/              # App Router 目录
├── public/           # 静态资源
├── package.json      # 项目依赖
├── next.config.js    # Next.js 配置
├── tsconfig.json     # TypeScript 配置
└── tailwind.config.js # Tailwind 配置