半天实现的NextJS轮子项目

sockstack / 329 / 2024-12-13 22:48:59

日常开发汇总

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。 <a href="https://ckai.xyz/?sockstack&section=detail" target="__blank">https://ckai.xyz</a> 
## 缘起

最近在学习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 性能评分：
桌面端性能：
![桌面端性能](/upload/img/20241213/675c49d4d537.png)
移动端性能：
![移动端性能](/upload/img/20241213/675c49e98c4e.png)
这些评分展示了本模板在桌面端和移动端的出色性能优化。

## 体验地址
[HorizonWing Landing Page](https://landingpage.horizon-wing.com/ "HorizonWing Landing Page")

## 快速开始
```shell
# 克隆仓库
git clone https://github.com/HorizonWing/horizon-wing-landing-page.git

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

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

## 项目结构
```shell
horizon-wing-landing-page/
├── 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

## 部署
```shell
# .env 配置文件
cp .env.example .env

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

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

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

## 联系我们

问题反馈：GitHub Issues
邮件联系：horizonwingtech@gmail.com

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

半天实现的NextJS轮子项目

作者

sockstack

许可协议

CC BY 4.0

发布于

2024-12-13

修改于

2024-12-30

下一篇：百度快速收录

尚未登录

半天实现的NextJS轮子项目

文章分类

博客重构之路

Spring Boot简单入门

k8s 入门教程

MySQL 知识

NSQ 消息队列

ThinkPHP5 源码分析

使用 Docker 从零开始搭建私人代码仓库

日常开发汇总

标签列表

springboot

hyperf

swoole

webman

php

多线程

数据结构

docker

k8s

thinkphp

mysql

tailwindcss

flowbite

css

前端