fad-trade-next/README_zh.md

使用 Nexty 加速 SaaS 开发 - 唯一一个集成可视化定价面板、AI 开发环境和企业级 CMS 的 Next.js 模板，还包含多语言支持、身份验证、支付系统、电子邮件功能和 SEO 优化。 立即体验 Nexty.dev

🌍 English ∙ 简体中文 ∙ 日本语

Next Forge - 多语言 Next.js 16 启动模板

一个轻量的 Next.js 16 多语言启动模板，帮助你快速构建面向全球的网站。

• 👉 源码地址
• 👉 在线预览

🚀 如果你正在寻找功能完备的全栈启动模板，请了解我们的高级版

✨ 特性

• 🌐 内置多语言支持 (中文、英文、日语)
• 🎨 基于 Tailwind CSS 的现代 UI 设计
• 🌙 深色/浅色主题切换
• 📱 响应式布局
• 📝 MDX 博客系统
• 🔍 SEO 优化
• 📊 集成多个统计分析工具
  • Google Analytics
  • Baidu Analytics
  • Google Adsense
  • Vercel Analytics

🚀 快速开始

环境要求

• Node.js 20.9 或更高版本
• pnpm 9.0 或更高版本（推荐）

注意: 项目已配置 packageManager 字段，推荐使用 pnpm 以获得最佳体验。

安装步骤

1. 克隆项目:

git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter

2. 启用 Corepack (推荐):

corepack enable

3. 安装依赖:

pnpm install
# 或使用其他包管理器
npm install
yarn

4. 复制环境变量文件:

cp .env.example .env

5. 启动开发服务器:

pnpm dev
# 或 npm run dev

访问 http://localhost:3000 查看你的应用。

⚙️ 配置

1. 基础配置

   • 修改 config/site.ts 配置网站信息
   • 修改 public/ 下的图标和 logo
   • 更新 app/sitemap.ts 配置站点地图
   • 更新 app/robots.ts 配置 robots.txt

2. 多语言配置

   • 在 i18n/messages/ 下添加或修改语言文件
   • 在 i18n/routing.ts 中配置支持的语言
   • 在 middleware.ts 中配置多语言路由
   • 在 app/[locale]/ 目录下创建页面
   • 多语言页面使用 i18n/routing.ts 导出的 Link 组件替代 next.js 的

📝 内容管理

博客文章

在 blog/[locale] 目录下创建 MDX 文件，支持以下格式:

---
title: 文章标题
description: 文章描述
image: /image.png
slug: /url-path
tags: tag1,tag2
date: 2025-02-20
visible: published
pin: true
---

文章内容...

可参考类型定义 types/blog.ts 确认支持的字段。

静态页面

在 content/[page]/[locale].mdx 下管理静态页面内容。

🔍 SEO 优化

模板内置了完整的 SEO 优化方案:

• 服务端渲染和静态生成
• 自动生成 sitemap.xml
• 配置 robots.txt
• 优化的 metadata
• 支持 Open Graph
• 多语言 SEO 支持

📊 统计分析

在 .env 文件中配置相应的 ID 即可启用:

NEXT_PUBLIC_GOOGLE_ANALYTICS=
NEXT_PUBLIC_BAIDU_TONGJI=
NEXT_PUBLIC_GOOGLE_ADSENSE=

📁 项目结构

nextjs-starter/
├── app/                      # 应用路由目录
│   ├── [locale]/            # 多语言路由
│   │   ├── about/           # 关于页面
│   │   ├── blog/           # 博客页面
│   │   └── ...              # 其他页面
│   ├── api/                 # API 路由
│   └── globals/             # 全局组件
├── blog/                   # 博客内容 (MDX)
│   ├── en/                  # 英文博客
│   ├── ja/                  # 日文博客
│   └── zh/                  # 中文博客
├── components/              # 可复用组件
│   ├── ui/                  # 基础 UI 组件
│   ├── header/              # 头部组件
│   ├── footer/              # 底部组件
│   └── ...                  # 其他组件
├── config/                  # 配置文件
├── content/                 # 静态内容 (MDX)
├── i18n/                    # 国际化配置
│   ├── messages/            # 翻译文件
│   ├── routing.ts           # 路由配置
│   └── request.ts           # 请求配置
├── lib/                     # 工具函数
├── public/                  # 静态资源
└── types/                   # 类型定义

🛠️ 技术栈

• 框架: Next.js 16 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS + Shadcn/ui
• 国际化: next-intl
• 内容: MDX
• 状态管理: Zustand
• 部署: Vercel
• 包管理器: pnpm (推荐)

🚀 部署

一键部署

手动部署到 Vercel

1. 推送代码到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 部署

其他平台部署

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

💡 开发最佳实践

包管理器使用

• 项目已配置 packageManager: "pnpm@10.12.4"
• 建议启用 Corepack: corepack enable
• 团队成员应使用相同版本的 pnpm

代码规范

# 代码检查
pnpm lint

# 类型检查
pnpm type-check

多语言开发

1. 新增语言支持：

   • 在 i18n/messages/ 添加新的语言文件
   • 更新 i18n/routing.ts 配置
   • 在 blog/ 和 content/ 下创建对应语言目录

2. 使用翻译：

import { useTranslations } from 'next-intl';

export default function MyComponent() {
  const t = useTranslations('namespace');
  return <h1>{t('title')}</h1>;
}

🔧 故障排除

常见问题

1. 包管理器版本不一致

# 删除 node_modules 和 lockfile
rm -rf node_modules pnpm-lock.yaml
# 重新安装
pnpm install

2. MDX 文件不显示

• 检查文件路径是否正确
• 确认 frontmatter 格式正确
• 检查 visible 字段是否设置为 published

3. 多语言路由问题

• 确保使用 i18n/routing.ts 中的 Link 组件
• 检查 middleware.ts 配置

4. 样式不生效

• 确认 Tailwind CSS 类名拼写正确
• 检查是否需要重启开发服务器

环境变量问题

确保 .env 文件包含必要的配置：

# 复制示例配置
cp .env.example .env
# 根据需要修改配置

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

关于作者

专注于 Next.js 全栈开发，欢迎探讨开发、咨询与培训等合作机会，联系微信：bigye_chengpu

• Github
• Twitter/X
• 博客 - J实验室
• Medium
• 掘金
• 知乎