V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

分享一个用 Windsurf 写的网站，源代码

多语言产品展示网站

基于 Next.js 14 构建的多语言产品展示网站，支持中英文切换，针对 SEO 优化，并实现了静态页面生成。

技术栈

Next.js 14
TypeScript
next-intl （国际化）
Tailwind CSS （样式）

在线演示

展示地址

Lighthouse 分数

移动端

桌面端

项目结构

src/
  ├── app/                    # 应用主目录
  │   └── [locale]/          # 多语言路由
  │       ├── page.tsx       # 首页
  │       ├── products/      # 产品相关页面
  │       └── blog/          # 博客相关页面
  ├── components/            # 公共组件
  ├── content/              # 内容数据目录
  │   ├── en/              # 英文内容
  │   └── zh/              # 中文内容
  ├── i18n/                # 国际化配置
  ├── lib/                 # 工具函数
  ├── messages/            # 翻译文件
  └── types/               # TypeScript 类型定义

内容管理指南

产品内容

产品内容存储在 src/content/{locale}/products/ 目录下，每个产品使用单独的 JSON 文件。

产品文件结构：

{
  "name": "产品名称",
  "description": "产品描述",
  "image": "/images/products/product1.jpg",
  "features": [
    "特点 1",
    "特点 2"
  ],
  "specifications": [
    "规格 1",
    "规格 2"
  ],
  "metadata": {
    "keywords": ["关键词 1", "关键词 2"],
    "category": "产品分类"
  }
}

博客文章

博客文章存储在 src/content/{locale}/blog/ 目录下。

文章文件结构：

{
  "title": "文章标题",
  "description": "文章描述",
  "content": "文章内容",
  "image": "/images/blog/post1.jpg",
  "author": "作者名称",
  "date": "2024-01-01",
  "tags": ["标签 1", "标签 2"],
  "metadata": {
    "keywords": ["关键词 1", "关键词 2"],
    "category": "文章分类"
  }
}

元数据和结构化数据

页面元数据来源

首页 (app/[locale]/page.tsx)
- 标题和描述：从 messages/{locale}.json 的 Index 命名空间获取
- OpenGraph 数据：基于相同的翻译内容生成
产品列表页 (app/[locale]/products/page.tsx)
- 标题和描述：从 messages/{locale}.json 的 Products 命名空间获取
- 产品数据：从 content/{locale}/products/ 目录读取
产品详情页 (app/[locale]/products/[id]/page.tsx)
- 标题：使用产品名称
- 描述：使用产品描述
- 结构化数据：基于产品信息生成 Product Schema
- OpenGraph：使用产品图片和描述
- 备用语言链接：自动为所有支持的语言生成
博客列表页 (app/[locale]/blog/page.tsx)
- 标题和描述：从 messages/{locale}.json 的 Blog 命名空间获取
- 文章列表：从 content/{locale}/blog/ 目录读取
博客文章页 (app/[locale]/blog/[slug]/page.tsx)
- 标题：使用文章标题
- 描述：使用文章描述
- 结构化数据：基于文章信息生成 Article Schema
- OpenGraph：使用文章图片、作者和发布日期
- 备用语言链接：自动为所有支持的语言生成

结构化数据示例

产品页面 Schema：

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "产品名称",
  "description": "产品描述",
  "image": "产品图片 URL",
  "brand": {
    "@type": "Brand",
    "name": "品牌名称"
  }
}

文章页面 Schema：

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "description": "文章描述",
  "image": "文章图片 URL",
  "author": {
    "@type": "Person",
    "name": "作者名称"
  },
  "datePublished": "发布日期"
}

SEO 优化

元数据配置

每个页面都配置了完整的元数据，包括：

基本元数据
- 标题（ title ）
- 描述（ description ）
- 规范链接（ canonical ）
Open Graph 元数据
- 标题
- 描述
- 类型（ type ）
- 图片（适用时）
多语言支持（ hrefLang ）
- 所有页面都配置了 hrefLang 标签
- 自动生成所有支持语言的替代链接
- 包含规范链接（ canonical ）
- 示例配置：
```
alternates: {
  canonical: `/${locale}/products`,
  languages: {
    en: '/en/products',
    zh: '/zh/products'
  }
}
```
结构化数据
- 产品页：Product Schema
- 博客页：Article Schema
- 首页：WebSite Schema

图片管理

所有图片按类型分类存储在 public/images/ 目录下：

public/images/
  ├── products/     # 产品图片目录
  │   ├── product1.jpg
  │   ├── product2.jpg
  │   └── ...
  ├── blog/         # 博客图片目录
  │   ├── blog1.jpg
  │   ├── blog2.jpg
  │   └── ...
  └── defaults/     # 默认图片目录
      ├── default-product.jpg  # 产品默认图片
      └── default-blog.jpg     # 博客默认图片

图片使用规范

产品图片
- 存放位置：public/images/products/
- 建议尺寸：1200x800 像素
- 格式：JPG 或 WebP
- 文件名：使用产品 ID 或英文名称，如 product-name.jpg
博客图片
- 存放位置：public/images/blog/
- 建议尺寸：1200x630 像素（适合社交媒体分享）
- 格式：JPG 或 WebP
- 文件名：使用博客文章的 slug ，如 blog-post-title.jpg
默认图片
- 存放位置：public/images/defaults/
- 包含默认产品图片和默认博客图片
- 用于未设置图片的产品或文章

图片优化

所有图片通过 Next.js Image 组件加载，自动优化
支持响应式图片尺寸
自动生成 WebP 格式（如果浏览器支持）
图片懒加载（除首屏关键图片外）

开发指南

安装依赖：

npm install

开发模式：

npm run dev

构建生产版本：

npm run build

启动生产服务器：

npm run start

注意事项

添加新语言时：
- 在 src/i18n/config.ts 中添加语言代码
- 在 messages/ 目录下创建对应的翻译文件
- 在 content/ 目录下创建对应的内容目录
添加新产品/文章时：
- 确保所有支持的语言都有对应的内容文件
- 图片路径使用相对于 public 目录的路径
- 检查并填写所有必要的元数据字段
SEO 最佳实践：
- 所有页面都应该有唯一的标题和描述
- 使用语义化的 HTML 标签
- 提供完整的结构化数据
- 确保所有图片都有合适的 alt 文本

目前尚无回复

用新的 AI 编辑器写了一个网站模板