Nextjs是自带路由解决方案的，目前Nextjs中有两套路由方案，分别是“Pages Router” 和“App Router”，这两套方案目前都是兼容的，都可以在Nextjs当前版本中直接使用。
大概是在Nextjs 13.4 版本之前，都是默认使用“Pages Router”为主，13.4版本后官方正式把App路由变更为默认且推荐的方案。
我们这套课程只基于新版路由“App Router”来进行学习，并且官方也是推荐使用"App Router"替代“Pages Router”的，“Pages Router”将来肯定是会被抛弃掉的。
如果大家对“Pages Router”方案感兴趣的话可以自行到官方文档里去学习了解。官方文档左上角有个下拉选择器可以进行响应的文档切换。
现在我们一起来学习App Router吧。
我们打开之前创建的Nextjs项目，展开app目录，app目录的文件结构会如下展示。
next-my-app/
└── app
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx此时我们的app文件夹它将是我们认识的第一个路由-根路由，对应路由 /，我们启动项目
便可访问到根路由，也就首页 http://localhost:3000，一个nextjs应用程序是从根路由开始嵌套延伸的，从app目录开始每创建一个文件夹nextjs都会根据文件夹嵌套关系映射到 URL 段的路由段。
如图所示：
每一个文件夹下都必须包含page.tsx文件。这是一种特殊文件约定，page表示页面顾名思义也就用来编写路由页面代码的。
只有定义page.tsx文件才使得路段可公开访问,相反未定义page.tsx文件的路由是不被公开的。
关于文件的Next.js 默认是支持 React、TypeScript 的，所以 .js、.jsx、.tsx 都是可以的。
定义页面
page.tsx页面编写页面组件
// app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
路由目录下，有很多类似page.js这样的特殊约定文件，例如layout.js、template.js、error.js、loading.js，404.js。
每个文件都有特殊的用途，我们慢慢来学习。