Next Web Nav - 现代化的前端导航网站

前言

在日常学习和工作过程中，我们经常需要收藏和管理大量的网站资源。Next Web Nav 就是为解决这个问题而生的一个现代化导航网站，它不仅提供了优雅的用户界面，还支持完全的自定义配置。

特色功能

🎯 核心功能

• 📱 完美的响应式设计，支持各种设备
• 🔍 快速的站内实时搜索
• ⚙️ 可视化的导航数据管理界面
• 💾 本地数据持久化存储
• 🌓 优雅的明暗主题切换

💡 用户体验

• 🎨 现代化的 UI 设计
• ⚡ 快速的页面加载和响应
• 🔄 流畅的动画过渡效果
• 📝 直观的数据编辑界面
• 🛡️ 安全的数据重置确认机制

🛠️ 技术特点

• 基于 Next.js 14 构建
• 使用 Tailwind CSS 实现样式
• 采用 shadcn/ui 组件库
• 使用 Zustand 管理状态
• 支持 TypeScript

效果展示

基于 Next.js 的现代化前端导航网站

在线预览

🌐 在线访问地址

快速开始

1️⃣ 克隆项目

git clone https://github.com/your-username/next-web-nav.git
cd next-web-nav

2️⃣ 安装依赖

# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

3️⃣ 启动开发服务器

# 使用 pnpm
pnpm dev

# 或使用 npm
npm run dev

# 或使用 yarn
yarn dev

4️⃣ 开始使用

在浏览器中打开 http://localhost:3000 即可开始使用

自定义导航数据

可视化编辑

1. 点击右上角的设置图标 ⚙️
2. 在弹出的设置面板中：
   • ➕ 添加新的分类或链接
   • ✏️ 编辑现有的分类和链接
   • 🗑️ 删除不需要的内容
   • 🔄 一键重置为默认数据
3. 点击保存即可应用更改

数据结构

interface NavLinkItem {
  icon: string    // 图标URL
  title: string   // 标题
  desc: string    // 描述
  link: string    // 链接URL
}

interface NavCategory {
  title: string        // 分类名称
  items: NavLinkItem[] // 分类下的链接列表
}

部署指南

Vercel 部署（推荐）

1. 点击上方按钮
2. 选择或导入你的 GitHub 仓库
3. Vercel 会自动完成部署配置
4. 等待部署完成即可访问

其他部署方式

1. 构建生产版本

pnpm build

2. 启动生产服务器

pnpm start

贡献指南

🤝 如何贡献

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

🐛 问题反馈

• 使用 GitHub Issues 提交 bug
• 在提交 bug 时请详细描述问题并附上复现步骤

开源协议

本项目采用 MIT 协议开源，完整的协议请参考 LICENSE 文件。

鸣谢

• 感谢所有贡献者的付出
• 如果觉得项目对你有帮助，欢迎给个 Star ⭐