Next.js

React 框架

Next.js 是基于 React、提供路由和服务端渲染等能力的 Web 应用框架例如，App Router 中 /posts 对应 app/posts/page.tsx，页面可先在服务器取得文章再交给浏览器。先确认项目使用 App Router 还是 Pages Router，密钥不能放进浏览器代码。

先知道

React 包管理 npm

也常被叫作Next

开始前

知道网址 /posts 可以打开一个页面。

看完后

能说出 App Router 项目中 /posts 会对应 app/posts/page.tsx，并判断取数据发生在浏览器前还是后。

打开 /posts，Next.js 先找哪个文件？

app⌁ page.tsx⌄ posts⌁ page.tsx

Terminal

$ GET /
命中 app/page.tsx
✓ 生成首页

example.com/

欢迎回来从上方网址打开文章列表

刚才发生了什么

1
网址对应文件位置
在 App Router 写法里，/posts 对应 app/posts/page.tsx。
2
服务器可先准备内容
这个页面可以先在服务器取文章列表，再生成要显示的内容。
3
浏览器收到页面
准备好的页面交给浏览器显示；需要点击的局部内容再在浏览器中接手。

你现在这样判断就够了

先确认项目使用的是 App Router 还是旧的 Pages Router；别把密钥或数据库操作放进浏览器会拿到的代码。

接下来学什么

1React→2TypeScript→3Tailwind CSS→4shadcn/ui→