半天实现的NextJS轮子项目

缘起

最近在学习NextJS，并且从去年的AI崛起，独立开发者这个职业逐渐火了起来，很多项目都是使用NextJS实现的，NextJS也被更多的开发者熟悉，之所以选择做一个landing page，就是独立开发者都需要一个landing page来展示自己的作品，所以有了本项目。

HorizonWing Landing Page

一个使用 Next.js、Tailwind CSS 和 next-intl 构建的现代化多语言落地页模板。

特性

• 🌐 多语言支持（17种语言）
• 🎨 基于 Tailwind CSS 和 Shadcn UI 的现代界面
• ⚡ 使用 Next.js 14 App Router 构建
• 📱 完全响应式设计
• 🔍 SEO 优化
• 🛠 TypeScript 支持

性能指标

PageSpeed Insights 性能评分：

桌面端性能：

移动端性能：

这些评分展示了本模板在桌面端和移动端的出色性能优化。

体验地址

HorizonWing Landing Page

快速开始

# 克隆仓库
git clone https://github.com/HorizonWing/horizon-wing-landing-page.git

# 进入项目目录
cd horizon-wing-landing-page

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

项目结构

horizonwing/
├── src/
│   ├── app/              # Next.js 应用路由
│   │   ├── [locale]/    # 国际化路由
│   │   └── layout.tsx   # 根布局
│   ├── components/      # React 组件
│   │   ├── ui/         # UI 组件
│   │   └── sections/   # 页面区块组件
│   ├── styles/         # 全局样式
│   └── lib/            # 工具函数
├── public/             # 静态资源
├── i18n/               # 国际化
│   └── locales/        # 多语言文件
└── tailwind.config.ts # Tailwind 配置

核心组件

• Hero - 响应式主页横幅
• Feature - 特性展示网格
• Testimonial - 用户评价展示
• Pricing - 价格方案展示
• FAQ - 可折叠的常见问题
• CTA - 引导用户行动组件
• Footer - 导航和社交链接

国际化

目前支持 17 种语言，包括：

• 阿拉伯语 (العربية)
• 德语 (Deutsch)
• 英语 (English)
• 西班牙语 (Español)
• 法语 (Français)
• 印地语 (हिन्दी)
• 印尼语 (Bahasa Indonesia)
• 意大利语 (Italiano)
• 日语 (日本語)
• 韩语 (한국어)
• 马来语 (Bahasa Melayu)
• 葡萄牙语 (Português)
• 俄语 (Русский)
• 泰语 (ไทย)
• 越南语 (Tiếng Việt)
• 繁体中文
• 简体中文

技术栈

• Next.js 14
• Tailwind CSS
• Shadcn UI
• TypeScript
• next-intl

部署

# .env 配置文件
cp .env.example .env

# docker-compose 启动项目
docker-compose up -d

# 访问地址
# http://localhost:3000

贡献

欢迎提交 Pull Request 来改进这个项目！

联系我们

• 问题反馈：GitHub Issues
• 邮件联系：mailto:[e-mail]

支持项目

如果这个项目对你有帮助，请给它一个 star ⭐️