weixin_39724159的博客

使用 Middleware 的时候还要注意一点，那就是目前 Middleware 只支持 Edge runtime，并不支持 Node.js runtime。/about/:path* 匹配 /about、/about/xxx、/about/xxx/xxx。/about/:path+ 匹配 /about/xxx、/about/xxx/xxx。/(about|settings) 匹配 /about 和 /settings。匹配 /about、/about/xxx。

这里有个知识点，不用revalidate/next.revalidate，在开发模式下使用 fetch，也会被缓存，因为 next.js 拓展了原生的 fetch 方法。该文件需要放在 app 文件夹下，但不能与 page.js 统计，因为请求接口也是用文件路径，不用加上route.js，会与 page.js 起冲突。10s 后，比如 12s 刷新，不会马上更新树枝，而是触发更新，然后，比如 13s 再请求，才会更新数据。Next.js 中的路由程序，实际上就是 API 接口。

拦截路由的意义，简单的来说，就是希望用户继续停留在重要的页面上。与[...folderName]不同的是，不带参数的路由也会被匹配到，及可以匹配/dashboard，前提是没有映射的文件路径/dashboard/page.js，如果存在此路径，使用[[...folderName]]就会报错。拦截路由感觉上就是页面上的交互都是用“假的”路由下的页面的内容，即 app/(.)photo/[id]/page.js ，只有复制地址到地址栏打开才是真正的页面，即 app/photo/[id]/page.js。

原理：loading 用 <Suspense> 把 page 和 promise 包裹住，当Suspense 捕获到 promise（可以用aysnc 和 use函数获取（React的use函数，用于读取promise或者context的值）） 返回的数据时，关闭 fallback。（2）App架构新增了布局（layout）、模版（template）、加载状态（loading）、错误处理（error）、404（not-found）等文件，为项目开发提供了一套规范。根布局：app文件夹下的布局。

Next.js 的项目架构有两种方式：App Router 和 Pages Router。这里我们采用 App Router 来搭建项目，首先创建 app 文件夹，再在文件夹下创建 layout.js 文件和 page.js 文件。使用 npm next build --profile 可以开启 React 的生产性能分析，然后输入 npm run start ，就可以在 Profiler 中监测性能。（Next.js 同样支持 .ts、.tsx、.jsx）一、创建 Next.js 项目。