Next Route

特殊路由文件

布局结构有关

组件按需加载而不是重新加载整个页面

边界处理

重定向配置

https://nextjs.org/docs/app/building-your-application/routing/redirecting

路由

• page.tsx、route.tsx等一些其他指定文件名的文件路由是实际路由，其他的文件都充当不了路由（https://nextjs.org/docs/app/building-your-application/routing/colocation#safe-colocation-by-default）
• 下划线开头的文件夹访问不了

page.tsx和roue.tsx分别构建页面和数据源(API接口)

预渲染构建

• 当阅读同类型文件时，类似于将接口数据缓存下来，然后切换路由直接替换数据即可

• https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

在 Next.js 中，生成静态参数（Generating Static Params）是指在使用动态路由时，为每个动态路径生成静态参数，以便在构建时预先渲染这些页面。这可以提升性能，因为预渲染的页面可以直接服务于用户，而无需在请求时进行服务器端渲染。

主要概念

1. 动态路由：

• 通过方括号定义动态路由，例如 [id]，表示这个路由是动态的，可以接收不同的参数。

2. 生成静态参数:

• 使用 getStaticPaths 方法在构建时获取所有可能的动态参数。这个方法返回一个对象，包含所有要预渲染的动态路径。

3. 示例:

export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts');
  const paths = posts.map(post => ({ params: { id: post.id } }));
  return { paths, fallback: false };
}

• 假设你有一个文章页面，路径为 /posts/[id]。在 getStaticPaths 中，你可以定义所有要生成的文章 ID：

4. 优点:

• 预渲染的页面可以在用户请求时快速响应，减少服务器负载，提高性能。
• 有利于 SEO，因为搜索引擎可以更容易地抓取预渲染的内容。

结论

生成静态参数是一种优化技术，使动态路由在构建时生成可静态服务的页面，提升性能和用户体验。这在处理大量动态内容时尤其重要。

单中括号和双中括号

• 区别于没有路径参数时是否渲染页面

平行路由（@开头的文件夹）

• https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
• https://nextjs.net.cn/docs/app/building-your-application/routing/parallel-routes
• 好处：可以渲染各自的状态（加载中或错误处理等），还可以通过角色来判断渲染哪类路由：https://yuxuetr.com/wiki/nextjs/parallel-routes
• 实现条件路由
• 实现模态路由

拦截路由模态（(.)写法）

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

TODO: 处理请求与响应请求