第一个区别：不同的页面对应的路由器设定！

1. 继续用 app 路由器（推荐，Next.js 未来主流）

• 路由规则：app 目录下，文件夹 + page.tsx 对应路由。例如：
  • app/page.tsx → 对应 / 路由（替代 pages/index.js ）
  • app/posts/first-post/page.tsx → 对应 /posts/first-post 路由（替代 pages/posts/first-post.js ）
• 布局管理：用 layout.tsx 处理共享布局（如导航、页脚），替代旧版自定义布局逻辑。

2. 切换回 pages 路由器（适合纯学习旧版）

若想严格跟旧教程，需修改项目配置：

• 在 next.config.ts 中添加配置，强制启用 pages 路由器：

  /** @type {import('next').NextConfig} */
  const nextConfig = {experimental: {appDir: false, // 关闭 app 路由器},
  };module.exports = nextConfig;
  

• 然后在项目根目录手动创建 pages 文件夹，按旧版规则（pages/index.js、pages/posts/first-post.js ）编写文件。

第二个区别：Link标签下是否需要a标签

第三个区别：客户端导航和服务端导航

如果修改页面的背景颜色，使用Link组件的话切换路由背景颜色的状态信息得以成功保存！但是使用a组件就不可以！

知识呢要常看才常新，我这是对照着Next.js进行学习的！
Link组件默认采用预加载，Next.js会自动在后台预取链接页面的代码，所以点击之后展示页面变得非常迅速。
代码拆分与预取的意思是：只加载要渲染的页面的js代码，其他部分暂时不渲

第三章：

如何将静态文件添加到Next.js中

不知道为什么小写的img就不可以，。。。
如何定义每个页面的head标签

如何创建一个可以复用的React组件，并使用CSS添加样式。
如何添加全局CSS。

后端服务
Next.js 不仅能构建前端页面，还同时提供了后端服务

src\app\api 内的 route.js 会自动生成后端接口

范例：src\app\api\blog\route.js

import { NextResponse } from "next/server";// 处理 GET 请求
export async function GET(request) {// 这里可以编写从数据库或其他数据源获取用户数据的逻辑const data = [{id: 1,title: "第1篇博客的标题",content: "第1篇博客的内容",},{id: 2,title: "第2篇博客的标题",content: "第2篇博客的内容",},];return NextResponse.json(data);
}

启动项目后，浏览器访问 http://localhost:3000/api/blog 就可以看到数据！