如果你想用 AI 帮自己架构一个网站、想在架构网站的过程中知道自己在做什么、想有一种安心感，那或许这篇文章会对你有帮助。
我自己个人认为，先了解清楚一些基本概念后，接下来跟 AI 一起架构网站时会顺利很多。有了基本概念，你才有能力决定：我的网站应该用哪一种框架来架构。目前比较流行的架构是Next.js和Astro。
01 — Next.js和Astro是什么架构？先认识：网站分「前端」和「后端」
一般上，网站分为前端和后端。我们先把网站「前端」想象成一间餐厅的前厅——一个展示给我们看、也让我们动手点餐的地方；把网站「后端」想象成餐厅的厨房——我们看不到，可是实际上却一直在运作的地方。我们聊的是Next.js和Astro，这跟 「前端」、「后端」有什么关系？先理解成网站分成「前端」、「后端」，因为他们之间的架构是不一样的。所以不管你选择的是Next.js还是Astro，它们代表的都是「前端」的架构。
02 — 既然都是「前端」，选Next.js还是Astro？
如果你还在看着这篇文章，那我就假设你跟我是一样是没有任何技术背景、可是又想通过 AI 架构网站的人。在这个情况下，我觉得没有必要把这个问题复杂化——因为我们没有工程师的基础去考量所有因素，所以我们跟工程师的判断标准不应该一样。我们根本不知道我们所不知道的，正是因为这样，我们更应该以我们需要的功能作为出发点来选择我们需要的框架。
03 — 有这些功能，Next.js 就是你的选择
Next.js 是拿来做「功能齐全」那种网站的架构——会员、交易、后台，一整套都能长在里面。
- 优点：上面那些功能，它几乎都做得到。
- 缺点：网页比较重，打开的速度相比Astro而言可能比较慢一点。
功能 ①：要能够让用户注册、登入
画面长这样：用户一进来要输入密码。登入成功后，网站顶部会出现他自己的名字，每个人登入后看到的「个人会员中心」和购买纪录都是完全不一样的。
功能 ②：要有购物车，还能线上付款
画面长这样：用户看到喜欢的衣服，点一下 Add to Cart（加进购物车），右上角的小图标就会变成 (1)。然后他可以点 Check out（去结帐），直接在网站上输入信用卡、或者用 Touch ‘n Go、LINE Pay、微信支付线上付钱。付完钱后，系统会自动发一封订单邮件给他。
功能 ③：要有后台登入与管理
画面长这样：管理员输入「管理员帐号和密码」登入后，网站会开启一个完全不同的「控制面板（后台 Dashboard）」。这三件事有一个共同点：网站必须「认得来的人是谁」，还要「记得他做过什么」。只要你的需求里出现「他自己的」、「付钱」、「只有某些人能看」这几个想法，Next.js 就是你的方向。
04 — 是这些情况，选 Astro
Astro 是拿来做「内容型」网站的工具——文章、服务介绍、作品集，把你想展示的东西排列整齐给所有人看。
- 优点：网页很轻，打开几乎是瞬间的事。对Google和AI爬虫都友善。
- 缺点：做不了登入、做不了会员专区、没办法做完整的线上支付功能。
场景 ①：公司的宣传介绍页 / 品牌官网
画面长这样：打开网站，上面有你公司的精美 LOGO、服务项目的价目表、还有客户写下的五星好评。
为什么用 Astro：因为这种网站不管谁点进来，看到的都是同一份内容——不需要认得来的人是谁。Astro 会在你按下发布的时候，就先把每一页做好存起来。
场景 ②：个人日记博客 / 技术教程文档网站
画面长这样：里面全是你写的密密麻麻的技术笔记、生活日记、或者小说文章。别人点进来就是纯粹读字、看图，不需要注册帐号也能看。
为什么用 Astro：你可以一直写、一直加文章——但每个读者看到的还是同一篇。没有人需要登入、没有人需要在你的网站上买东西，所以你不需要那些功能。
05 — 以你的功能要求作为出发点决定你的框架
「希望这篇文章，真的有帮助到你」
Aaron Goh