半天实现的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

快速开始

bash 复制代码
# 克隆仓库
git clone https://github.com/HorizonWing/horizon-wing-landing-page.git

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

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

项目结构

shell 复制代码
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)
  • 繁体中文
  • 简体中文

技术栈

部署

shell 复制代码
# .env 配置文件
cp .env.example .env

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

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

贡献

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

联系我们

支持项目

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

相关推荐
求知若渴,虚心若愚。42 分钟前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj2 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~2 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟3 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus4 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉4 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A4 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6664 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus5 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus5 小时前
react-router-dom中的几种路由详解
前端·react.js