nextjs 实战开发1 Mercury 二级域名分发系统

开发目标

开发一个免费的二级域名分发系统

创建项目

root@ubuntu:~/dev-nextjs/mercury_frontend# pnpm create next-app@latest .
版本：pnpm -v 9.12.2
版本：node -v v20.16.0
版本：next 15.0.2

为了开发方便，我们要将脚手架的package.json进行修改，next dev -H 0.0.0.0 -p 80，这样当我们运行 pnpm run dev的时候就会自动执行 next dev -H 0.0.0.0 -p 80，在开发的时候可以使用80端口进行访问方便很多。

老规矩，这个是初始化之后的脚手架，到这里就证明我们的开发环境配置没有问题，可以继续开发了。

如果不懂如何配置开发环境，请百度搜索：曲速引擎 warp drive csdn 在首页找到我的技术博客访问地址，里面有更新一系列0基础教学入门文章，一线更新内容也将会在我的个人博客上面更新，谢谢大家。

梳理开发模块

首先 网站分为三部分 页眉、主体部分、页脚

1. 页眉
   

2. 主体部分
   

3. 页脚
   

页眉部分组件

1. logo 图标

2. logo 组件

3. Blog 页面

4. About Us 页面

5. Login 按钮控制登录 （Google 单点登录）

主体部分组件

1. 网站介绍组件

2. 查询二级域名使用情况组件

3. 二级域名管理组件

   1. 添加DNS记录组件 （From表单运用）

   2. 展示DNS记录组件 （Table表格运用）

4. 功能介绍组件

5. 客户展示组件

6. 用户订阅组件

页脚部分组件

1. 服务条款组件

2. 隐私政策组件

3. Cookie政策组件

4. 网站版权组件

5. 警告组件

解决权限控制、跨域处理、谷歌单点登录等问题，以上就是本次教程的功能开发结构，未来的文章将会按照这个结构逐步实现，本次文章到这里结束啦，如果喜欢我的文章请百度搜索：曲速引擎 warp drive csdn 在首页找到我的技术博客访问地址，所有内容都将在我的技术博客上展示，比起其他平台更容易搜索完整版本。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号