Statsify Finance 是我做的一个金融分析工具网站，给金融小白和专业用户都能用。这篇简单聊聊为什么做这个项目、网站长什么样、底下用了什么技术。
为什么做这个
我自己平时也炒股看盘，发现市面上的金融工具要么太老（界面停留在十年前），要么太重（一打开各种弹窗推销开户）。我想做一个干净的、把基础概念和工具都串起来的小站，自己用着舒服顺便也给别人参考。
网站长什么样
Statsify Finance 大致分三块。
分析页 (/analysis)
- 定性分析 (
/analysis/qualitative)。 讲定性经济和金融概念，每个概念配解释和真实案例。 - 定量分析 (
/analysis/quantitative)。 讲定量概念，搭配公式和案例。
策略页 (/strategy)
- 交易策略 (
/strategy/trade)。 常见交易策略，配应用案例。 - 投资者画像 (
/strategy/investor)。 介绍不同类型的投资者，帮你定位自己属于哪一类。 - 风险管理 (
/strategy/risk-manage)。 风险控制方法，按行业分类配可视化。
其他功能
- 文章 (
/articles)。 讨论近期市场事件和行业趋势的文章。 - 搜索 (
/search)。 搜索文章和概念。 - 金融词典 (
/finance-terms)。 一个清晰版的金融术语词汇表。
用了什么技术
整个站建在 Next.js + Tailwind 上，组件库用 Ant Design，图表用 ECharts。CMS 我没用现成的，直接 Next.js 的 API Route 加 MongoDB 自己撸了一套，数据模型简单可控。认证用 NextAuth，编辑器是 wangeditor。全程 TypeScript。
主要技术栈：
- Next.js。 React 框架，支持 SSR、路由和 API 路由。
- Tailwind CSS。 样式。
- Ant Design。 UI 组件库。
- ECharts。 数据可视化。
- MongoDB。 数据库。
- NextAuth。 认证。
- wangeditor。 富文本编辑器。
- TypeScript。 类型。
项目结构
代码组织得比较简单：
app/。Next.js 主应用目录，包含页面路由、API 路由、组件。components/。共享组件，分 UI 组件和业务组件两类。models/。MongoDB 数据模型。libs/。数据库连接和工具函数。src/。样式文件和静态配置数据。
整个工程不大，但具备一个真正产品的基本形态。后续会在这个站上继续加内容和工具。