Files

JanYork 1db8941b9a docs: 添加项目截图并更新next-env.d.ts路径

添加4张项目截图到README文档中，展示项目功能
更新next-env.d.ts中的类型声明文件路径

2026-03-18 13:30:32 +08:00

6.0 KiB

Raw Permalink Blame History

智店官网

基于 Next.js 16 全栈框架的企业官网项目，当前实现了单页官网展示、联系表单提交、SMTP 邮件通知、可配置 SEO、robots.txt / sitemap.xml 输出，以及 PM2 生产运行配置。

功能概览

单页官网：首页内容主要由 data/*.json 驱动。
联系表单：提交“获取初步方案”后，会调用 /api/contact，由服务端通过 SMTP 发邮件到配置的多个管理邮箱。
SEO 配置：站点标题、描述、关键词、canonical、Open Graph、Twitter、站点验证、robots、sitemap 都可配置。
生产部署：支持 pnpm build && pnpm start，也提供了 PM2 的 ecosystem.config.cjs。

快速启动

1. 安装依赖

pnpm install

2. 配置环境变量

本地开发建议使用 .env.local。当前项目已经按飞书企业邮箱写入了测试配置。

可参考 ./.env.example：

MAIL_HOST=smtp.feishu.cn
MAIL_PORT=465
MAIL_USER=your-mail-account@example.com
MAIL_PASS=your-mail-password
MAIL_SSL_ENABLED=true
MAIL_FROM_EMAIL=your-mail-account@example.com
MAIL_FROM_NAME=智店软件官网

3. 启动开发环境

pnpm dev

默认访问：

http://localhost:3000

构建与运行

本地生产模式

pnpm build
pnpm start

使用 PM2 运行

项目已提供 ./ecosystem.config.cjs。

pnpm build
pm2 start ecosystem.config.cjs
pm2 status
pm2 logs com-index

常用 PM2 命令：

pm2 restart com-index
pm2 stop com-index
pm2 delete com-index
pm2 save
pm2 startup

配置说明

1. 站点基础配置

文件：data/site.json

主要负责：

公司名称、英文名、描述、电话、邮箱、地址
顶部导航和页脚导航
SEO 全局配置

重点字段：

company.phone：站点展示电话
company.email：页脚展示邮箱
seo.siteUrl：线上正式域名，用于 canonical、Open Graph、sitemap、robots
seo.defaultTitle：默认页面标题
seo.titleTemplate：子页面标题模板
seo.description：默认描述
seo.keywords：关键词数组
seo.canonicalPath：当前站点 canonical 路径，单页官网一般为 /
seo.robots.index / seo.robots.follow：搜索引擎抓取控制
seo.openGraph.image：社交分享图路径
seo.verification：搜索引擎站点验证

2. 首页文案与区块配置

文件：data/home.json

主要负责：

Hero 文案
产品、方案、案例、联系表单文案
“获取初步方案”按钮和联系信息展示

3. 邮件通知配置

文件：config/contact-mailer.yaml

这个文件负责：

SMTP 主机、端口、SSL、账号密码引用
发件人邮箱和名称
收件人列表
邮件标题前缀

当前配置方式：

SMTP 参数优先从 .env.local 里的 MAIL_* 变量读取
notification.to 支持配置多个邮箱
YAML 里可以直接写死，也可以用 ${ENV_NAME} / ${ENV_NAME:default} 引用环境变量

示例：

notification:
  to:
    - bd@zhidiansoft.com
    - ops@zhidiansoft.com
  subjectPrefix: 官网线索

4. SEO 输出文件

文件：

app/layout.tsx
lib/seo.ts
app/robots.ts
app/sitemap.ts

职责：

app/layout.tsx：把 SEO 元数据挂到 Next Metadata
lib/seo.ts：统一把 site.json 里的 SEO 配置转换成 Metadata / robots / sitemap
app/robots.ts：生成 /robots.txt
app/sitemap.ts：生成 /sitemap.xml

目录树与作用

.
├── app/
│   ├── api/contact/route.ts      # 联系表单提交接口，负责校验和发邮件
│   ├── layout.tsx                # 全局布局与 Metadata 入口
│   ├── page.tsx                  # 首页路由
│   ├── robots.ts                 # 生成 robots.txt
│   └── sitemap.ts                # 生成 sitemap.xml
├── components/
│   ├── sections/                 # 首页各业务区块
│   ├── footer.tsx                # 页脚
│   └── navbar.tsx                # 顶部导航
├── config/
│   └── contact-mailer.yaml       # 邮件通知 YAML 配置
├── data/
│   ├── home.json                 # 首页文案和模块数据
│   └── site.json                 # 公司信息、导航、SEO 配置
├── lib/
│   ├── contact-form.ts           # 表单字段校验
│   ├── contact-mailer.ts         # SMTP 发信逻辑
│   ├── contact-mailer-config.ts  # YAML 配置读取与校验
│   ├── seo.ts                    # SEO 配置转换
│   └── utils.ts                  # 通用工具
├── public/                       # 静态资源
├── .env.example                  # 环境变量示例
├── ecosystem.config.cjs          # PM2 配置
├── next.config.mjs               # Next.js 配置
├── package.json                  # 依赖与脚本
└── tsconfig.json                 # TypeScript 配置

表单提交流程

用户在“获取初步方案”表单输入姓名、公司、电话、门店规模和需求描述。
前端组件 components/sections/contact-section.tsx 向 /api/contact 发起 POST 请求。
API 路由 app/api/contact/route.ts 使用 Zod 校验请求体。
服务端读取 config/contact-mailer.yaml 并解析环境变量。
nodemailer 通过 SMTP 给 notification.to 中的所有邮箱发送通知邮件。
邮件发送成功后，前端才显示“信息已提交”。

注意事项

.env.local 已在 .gitignore 中忽略，不会默认提交到仓库。
线上部署前，请确认 data/site.json 中的 seo.siteUrl 已改成真实域名。
如果邮件发送失败，优先检查 .env.local、contact-mailer.yaml 和 SMTP 账号权限。
当前仓库存在一些与本次需求无关的历史 TypeScript 报错，next build 不受影响，但 pnpm exec tsc --noEmit 还不能全绿。

6.0 KiB Raw Permalink Blame History Unescape Escape