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

相关推荐
musk12128 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css