AWSCLOUD/README.md

Seven - 多语言官网（Next.js 15）

基于 Next.js 15、Tailwind CSS 和 shadcn/ui 搭建的多语言企业官网模板，内置中/英/日/韩/繁体语言路由，统一页头/页尾布局与 SEO 元数据管理。

技术栈

• Next.js 15（App Router）
• React 18
• Tailwind CSS
• shadcn/ui

目录结构（关键项）

app/
  [lang]/
    layout.tsx          # 按语言生成 Metadata（需 await params）
    page.tsx            # 首页入口（需 await params）
    products/page.tsx   # 产品页（Client 组件）
    solutions/page.tsx  # 解决方案页（Client 组件）
    contact/page.tsx    # 联系我们（使用 PageLayout，表单仅在客户端渲染）
components/
  PageLayout.tsx        # 统一 TDK、Navbar、Footer 与内容容器
  Navbar.tsx
  Footer.tsx
  TDK.tsx               # 页面标题/描述/关键词
data/
  content.ts            # 站点通用文案（多语言）
  pageContent.ts        # 各页面文案（多语言）

快速开始（Windows PowerShell）

# 安装依赖
npm install

# 本地开发（默认 http://localhost:3000）
npm run dev

# 生产构建
npm run build

# 本地预览生产构建
npm run start

环境要求

• Node.js ≥ 18.17（推荐 LTS）
• npm ≥ 9（或使用 pnpm/bun 亦可）

多语言与路由

• 路由格式：/[lang]/...，其中 lang ∈ { en, zh-CN, zh-TW, ko, ja }
• 入口页静态参数：app/[lang]/page.tsx 中的 generateStaticParams()
• 元数据生成：app/[lang]/layout.tsx 中的 generateMetadata() 会根据语言返回对应 TDK

注意：Next.js 15 起，动态段的 params 在服务端为 Promise，必须 await 后再使用，例如：

export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  // ...
}

SEO 与 TDK

• 统一在 PageLayout 内通过 TDK 组件注入 title/description/keywords
• app/[lang]/layout.tsx 中维护各语言默认元数据与 alternates.languages

SSR/CSR 与 Hydration 注意事项

• 避免在 SSR 阶段使用不稳定输出（如 Date.now()、Math.random()）
• 对于仅在客户端可用的交互（如带自动填充的表单），采用“客户端渲染占位”策略：
  • contact/page.tsx 中使用 isClient 状态在挂载后再渲染表单，避免浏览器扩展（如 LastPass）注入导致水合不一致
• 若你引入新的服务端函数，确保在使用 params 前执行 await

常见问题（FAQ）

• Hydration failed：

  • 检查是否使用了未固定输出的变量；
  • 检查是否有浏览器扩展注入 DOM（如密码管理器）；
  • 对仅客户端渲染的复杂表单使用 isClient 保护渲染；
  • 移除不必要的 suppressHydrationWarning，定位并修复根因。

• Route used params.lang. params should be awaited：

  • Next.js 15 的动态 API 是异步的，请调整类型为 Promise<...> 并 await。

开发脚本

# 代码检查（如已配置）
npm run lint

# Tailwind 即时开发（随 dev 一起运行）
npm run dev

部署

• 推荐部署到 Vercel：
  • Framework: Next.js
  • Build Command: npm run build
  • Output: .next
  • Node Version: 使用项目/平台默认 LTS
• 也可自托管：
  • 运行 npm run build && npm run start

贡献与代码风格

• 变量/函数命名清晰完整，避免缩写
• 避免深层嵌套，使用早返回
• TypeScript 明确标注导出 API 的类型
• 不捕获且吞掉错误；错误需被有意义处理

许可证

本仓库以 MIT 协议开源。根据业务需要可自由修改与商用。