nextjs使用02

并行路由

同一个页面，放多个路由，，

目录前面加@,layout中可以当作插槽引入

import React from "react";function layout({children,notifications,user}:{children:React.ReactNode,notifications:React.ReactNode,user:React.ReactNode
}){return (<div>layout{notifications}<div>{user}</div></div>)
}export default layout

nextjs拦截跳转页面

next写接口

创建route.ts,

export async function POST(request:Request){var comment = await request.json();const newComment = {id:comments.length+1,text:comment.text}comments.push(newComment)return new Response(JSON.stringify(newComment),{headers:{"Content-Type":"application/json"},status:201})
}

next接收queryParams

import {type NextRequest} from "next/server"
export async function GET(request:NextRequest,){var searchParams = request.nextUrl.searchParams;var query = searchParams.get("query");var find = query?comments.find(comment=>comment.text.includes(query)):comments;return Response.json(find)
}

获取请求头

• 第一种

import {type NextRequest} from "next/server"
export async function GET(request:NextRequest,){var requestHeaders = new Headers(request.headers);console.log(requestHeaders.get("Authorization"))}

• 第二种

import {type NextRequest} from "next/server"
import {headers} from "next/headers"
export async function GET(request:NextRequest,){const headersList =  await headers()console.log(headersList.get("Authorization"))return Response.json("xxx")
}

获取cookie

两种方式获取cookie

middleware中间件拦截

middleware.ts跟app一个层级

import  type {NextRequest} from "next/server";
import {NextResponse} from "next/server"export function middleware(request:NextRequest){console.log(request.nextUrl.pathname,"pathname")// 重定向： 地址会变 // return NextResponse.redirect(new URL("/",request.url))//  转发，， 浏览器url不变，内容变化return NextResponse.rewrite(new URL("/",request.url))
}export const config = {// 将 /hello 转发到  / matcher:"/hello"
}

中间件处理response：===> 设置cookie或者响应头

import  type {NextRequest} from "next/server";
import {NextResponse} from "next/server"export function middleware(request:NextRequest){console.log(request.nextUrl.pathname,"pathname")var response = NextResponse.next();var themePreference = request.cookies.get("theme");if (!themePreference){response.cookies.set("theme","dark")}return response
}export const config = {// 将 /hello 转发到  /matcher:"/hello"
}