React18SSR+Next.js13
刘军liujun
目录1中间件和匹配器
content
2Layout和生命周期
3网络请求的封装
4编写后端接口
5页面渲染模式
6数据获取和Redux
7项目实战和部署
coderwhy中间件(middleware)
?Next.js的中间件允许我们去拦截客户端发起的请求，例如：API请求、router切换、资源加载、站点图片等。
?拦截客服端发起的请求等等之后，便可对这些进行：重写、重定向、修改请求响应标头、或响应等操作。
?使用中间件需按照以下步骤操作：
?1.在根目录中创建middleware.ts文件
?2.从middleware.ts文件中导出一个中间件middleware函数（支持async，并只允许在服务端），会接收两个参数：
?req：类型为NextRequest
?event：类型为NextFetchEvent
?3.通过返回NextResponse对象来实现重定向等功能
?next()-将继续中间件链
?redirect()-将重定向，如：重定向到某个页面
?rewrite()-将重写URL，如：配置反向代理
?4.没返回值：页面将按预期加载和返回next()一样
coderwhy匹配器（Matcher）
?匹配器允许我们过滤中间件以在特定路径上运行，比如：
?matcher:‘/about/:path*，意思是匹配以/about/*开头的路径。其中路径开头的：是修饰符，而*代表0个或n个
?matcher:[‘/about/:path*’,‘/dashboard/:path*’]，意思是匹配以/about/*和/dashboard/*开头的路径
?matcher:[‘/((?!api|_next/static|favicon.ico).*)‘]，意思是不匹配以api、_next、static、favicon.ico开头的路径
?注意：上面的path是占位符，不是固定的。
coderwhy路由拦截
?下面我们通过中间件+匹配器来实现路由的拦截：
?matcher:[/((?!api|_next/static|favicon.ico).*)]
coderwhy布局组件（Layout）
?Layout布局是页面的包装器，可以将多个页面的共性东西写到Layout布局中，使用props.children属性来显示页面内容
?例如：每个页面的页眉和页脚组件，这些具有共性的组件我们是可以写到一个Layout布局中。
?Layout布局的使用步骤：
?1.在components目录下新建layout.tsx布局组件
?2.接着在_app.tsx中通过Layout组件包裹Component组件
coderwhy嵌套布局（NestLayout）
?Layout布局可以作为所有页面的容器，也可以给每个页面一个单独的布局也是可以的，并且也可以在布局中嵌套布局。
?因此，我们可以利用布局再嵌套一个布局来实现二级路由。
coderwhy嵌套路由
?Next.js和Nuxt3一样，也支持嵌套路由(但是只在app目录下)，也是根据目录结构和文件的名称自动生成。
?二级路由实现有两种方案：
?方案一：使用Layout布局嵌套