Shiro 阅读笔记：Next.js 文件路由¶

文件路由¶

Next.js 文件路由，阅读这个仓库感觉比较重要的就三个 - 基本文件路由： - 正常目录即对应 URL - layout 所在的样式应用于本目录所有页面（包括子目录） - page 相当于叶子节点，是最终放入的 children 元素

逻辑大概是这样的，对于一个 url，找到当前层以及上层的所有目录的 layout，逐次拼接起来，再加上最终叶子的 page，得到完整 html

/blog/react/article1 的拼接顺序：
app_layout --> blog_layout ---> react_layout ---> article1_layout --->
article1_page

• 分组：
  • 目录名形式为：(group)
  • 分组不进入 url 但创建一个新的目录层级，可以套 layout

分组的一个经典的例子：

- app
    - (home)
        - layout.tsx
        - page.tsx
    - about
    - blog
    - friend
    - layout.tsx