起因
起因是自己半年前脑袋一热买了几个 .ai 域名，当时想着做导航站来着，一直没做。
刚开始也总找借口，比如觉得自己之前是在外企搞大数据的，虽然对海外 GA 、GCP/AWS 、Hubspot 这些挺熟，但是没写过前端，讨厌前端切图/一点点调 UI ，没研究看清导航站的前途等等借口。
总是想等到一切都完美，其实也是一种严重的拖延，其实永远等不到完美的时候。**
上周末早上在公园边跑步边听播客的时候，听到一个说法说👇
当你要做决定时，就去散步/跑步，因为人在前进时做决定，脑袋会想到往前看，做的决定也会更往前看。**
于是终于决定要马上动手，在未动手时，信息永远不足，会看不清，但是行动会带来新的信息，会看得更清。
回家先马上开始写下第一行代码，一直信奉 站在巨人的肩膀上，自己订阅了/收藏整理了不少优质小报童专栏，像少楠、Light、纯银等很多优质创作者都在小报童开了专栏。
所以第一个站就拿小报童专栏导航站练手吧。
上线
今天差不多了，先发 MVP 上线：小报童精选专栏导航站: 👉🏻xiaobot.store👈🏻
应该是市面上专栏数据最多的小报童导航站了，而且加了搜索和自己精心打的搜索标签，毕竟以前是搞数据的嘛，，，打标签熟门熟路了😝
因为时间很仓促，很多技术栈是刚学的，还有很多不足请大家反馈哈，听劝
比如：
- 1️⃣ UI 方面，移动端体验还不够好，往下滑专栏太多了，用户想重新搜索得往上滑挺久，应该得加一个直达搜索的地方(还没学会)
- 2️⃣ 有一些“原价 9999 ，现金 19.9”的坏风气专栏，计划加一个过滤项帮大家按需过滤一下
- 3️⃣ 一般搜索的时候，都会有按照某些字段排序的需求，比如内容数、更新时间等，还没来得及加上
技术栈
在写代码前，以下很多技术栈自己还完全不会，但是没关系，Learning by Doing!!!，不要给自己找借口
- 全栈：Next.js14
- Database: Postgresql on Supabase
- ORM：Prisma
- UI: Tailwind CSS
- 部署：Vercel
- 域名解析：Cloudflare
实践下来，这一套是真的快，Vercel&&Cloudflare 真是赛博活佛，代码 merge 到 Github 主分支后，Vercel 直接部署，5min 后最新代码就可以直接访问了。
之前用国内阿里云的 ECS ，得自己写 CI/CD 脚本，每次部署还得花很多时间。。。
除了域名花了点钱，Vercel&&Cloudflare 都完全 free plan 搞起。
Next.js14 几个关键技术
0. Next.js 代码脚手架
Vercel 官网有很多很友好的 starter template，比如海外支付必备的 Stripe Starter template，我因为用到 Supabase 的数据库，直接 npx create-next-app -e with-supabase 就可以 clone 下来脚手架，很方便。
1. 静态页面生成
考虑到小报童很多专栏数据并不是经常更新，比如作者介绍等，于是考虑用上了 Next.js generateStaticParams + 动态路径，大家注意了
Next.js 14 才有 generateStaticParams!!!!
Next.js13 用的是 getStaticProps
动态路径由 Next.js 的文件夹约定解析，代码文件在地址栏会被解析为👇：
| Example | URL | params |
|---|---|---|
app/shop/[slug]/page.js | /shop/1 | { slug: '1' } |
app/shop/[category]/[item]/page.js | /shop/1/2 | { category: '1', item: '2' } |
app/shop/[...slug]/page.js | /shop/1/2 | { slug: ['1', '2'] } |
举例：
| Example | URL | tilte |
|---|---|---|
app/p/[slug]/page.tsx | https://xiaobot.store/p/shengcaiyoushu | 奕仁-生财有数项目精选 |
app/p/[slug]/page.tsx | https://xiaobot.store/p/mediabuy | 静水流深-AI海外赚钱 |
app/p/[slug]/page.tsx | https://xiaobot.store/p/card | flomo Team-笔记的方法 |
app/p/page.tsx | https://xiaobot.store/p/ | 小报童专栏精选Top100创作者集锦 |
大家可以看到，Next.js 是根据文件结构的约定来生成页面的，如果 page.tsx 中包含 generateStaticParams，那该页面就会被解析为静态页面，在 pnpm run build 时被渲染为静态页面。
理解文件结构约定+generateStaticParams这两点对搞懂 Next.js 很重要。
站点收录提交
站点提交这个真的完全不 scale 的一个活，每个搜索引擎都得注册、验证、提交 URL ，而且有不少坑，大家可以关注一下👇
而且在提交这点上，国内国外体验差距真的挺大的
国外比较知名就是 GSC(Google Search Console) 和 Bing ，GCS 可以 CNAME 验证站长，很快验证通过，Bing 可以从 GSC 已经验证过的站直接 import （不过不知道为啥，刚刚一直导入失败）
国内百度、搜狗、头条、360 搜索这几个，体验最好的是头条搜索，很快验证通过。百度不知道为啥，文件验证、Meta 验证一直失败，而且和搜狗/360/百度一样，都没有 CNAME 验证。
提醒: 搜狗、360 搜索验证站点都需要域名 ICP 备案 + 申请材料，不然验证了网站根目录也不收录。很麻烦，练手站就不搞了。
所以以后每次验证，都得改代码重新部署，有 CNAME 可以不用重新部署这点挺友好。
大家有计划提交国内站点真的注意哈，部署前提前搞好验证文件或者 meta
