项目背景
随着近几年 LLM（大语言模型）在国内外迅速的发展，AI 应用也展现出爆发式的增长，不再是单纯的以聊天对话为主的展现形式，而是以多模态、多场景为主的多层展现形式。
文生图、图生图、文生视频、图生视频、AI 编程、数字人等各方面的 AI 应用都在不断地发展，也在不断地被应用到各个行业。
尤其是今年 DeepSeek 的爆火，更加推动 AI 应用在全行业的落地，几乎国内的大部分 AI 应用都接入了 DeepSeek 的服务，也让 AI 应用在全行业的落地更加的快速。
在 AI 编程方面，尤其是对我们程序员来说更是一个福音，我们可以使用 AI 编程助手来辅助我们写代码，如 VsCode 中的 MarsCode 插件，我们使用它就可以轻松实现代码提示、代码注释、AI 提问等一系列辅助功能。
未来，AI 应用会贯穿我们生活的始终，那这么多的 AI 应用我们该如何去使用呢，我们不妨做一个 AI 导航网站，便于我们查询和使用。
功能介绍
目前 AI 导航网站实现的功能如下，未来还会持续迭代更多功能。
登录、注册、点赞、收藏、留言板、编辑网站、新增网站、删除网站、更新网站、我的收藏、个人设置、暗黑主题、侧边栏导航。
项目模版
本项目的初始化，参考的本专栏总结的一篇文章《配置一个 Next.js 项目模板，用于项目快速开发》，集成一些项目开发规范，如 husky、commitlint、prettier 等，具体内容以本项目源代码为准。
线上数据库
本项目使用 Prisma 进行数据库的相关操作。
本项目的数据库使用的是基于 Supabase 平台的 PostgreSQL 数据库，Supabase 平台提供在线数据库管理，你可以把它理解为线上版本的 Navicat ，一个在线的图形化数据库管理工具。
具体使用方式您可以参考本专栏的一篇文章《在 Next.js 中使用 Prisma 集成数据库》，这篇文章介绍如何在项目中集成 Prisma 与 Supabase。
登录功能
为便于开发，本项目登录功能使用的是快速集成工具 Clerk，Clerk 目前是支持 Next.js 的。
只需要几行代码，就可以轻松实现登录功能，并且 Clerk 自带 UI，如果不想使用其 UI 样式，还可以进行自定义页面的调节，非常方便。
本项目实现的登录页面，UI 主题使用的是 Clerk 内置的一个主题。
注册功能
Clerk 同样也提供注册功能，与登录功能一样的 UI 风格。
点赞功能
本项目支持点赞功能，每个用户针对一个网站只能点赞一次，否则就是取消点赞。只有登录的用户才能点赞，因为要记录到数据库中。
收藏功能
收藏功能同上，收藏的文章会被收集到我的收藏页面，便于后期查阅。
留言板
留言板页面是由 AI 编程助手 v0 生成的，用户可以免费使用几次，达到指定次数就会收费，否则限制使用。
留言板区分管理员和普通用户，未登录的用户也可以留言，支持留言点赞和回复功能，只需要输入用户名就行，管理员可以删除，置顶指定的留言。
增删改查
目前只有管理员才能进入管理网站页面，否则会提示没有权限。
新增页面：
点击卡片右上角的三个点，即可编辑网站，也可以删除网站。
编辑页面：
管理分类页面：
该页面用于新增分类，在新增网站的时候，用于指定是什么类型的网站。
未授权的页面提示。
社交卡片
在网站的右上角新增微信联系方式和项目 Github 地址，用于社交。
暗黑模式
在页面右上角提示亮色和暗黑模式的切换
暗黑模式：
404页面
当输入项目之外的页面时，会提示 404 页面未找到。
AI 助手
在开发本项目的时候，部分页面使用 v0 帮我设计样式和逻辑，我只需要给它对应的提示词，它就会帮我生成对应的页面逻辑。
结束语
作者把本项目当作一个入门 Next.js 的实战项目，并且根据学习 Next.js 的经验以及周边生态，持续对本项目进行开发和改进，目的其实很简单，探索并学会使用 Next.js 进行全栈开发。
本文只是对该项目的简要概述，更详细的开发流程，会在本专栏后续推出。
网站地址：xtainav.cn
Github 地址：github.com/vaesonshu/x…
