Next.js 中的路由程序,实际上就是 API 接口
新建一个名为 route.js 的特殊文件
该文件需要放在 app 文件夹下,但不能与 page.js 统计,因为请求接口也是用文件路径,不用加上route.js,会与 page.js 起冲突
缓存行为
1、默认情况下,生产环境使用 response / nextResponse 的 GET 请求会被缓存,而开发环境不会。
生产环境情况,通过 npm run build,我们可以看到,api/time 被缓存了:
页面上刷新不会改变:
值得注意的一点是,加入是在动态路由下渲染,则不会被缓存:
重新验证有两种方案:
1)通过设置 revalidate:
10s 后,比如 12s 刷新,不会马上更新树枝,而是触发更新,然后,比如 13s 再请求,才会更新数据。
2)使用 next.revalidate:
这里有个知识点,不用revalidate/next.revalidate,在开发模式下使用 fetch,也会被缓存,因为 next.js 拓展了原生的 fetch 方法。
使用 next.revalidate 后,在开发环境下:
在生产环境下,虽然打包是静态的,但实际上没被缓存:
常用配置
1)请求参数
export async function GET(request) {
let searchParams = request.nextUrl.searchParams
const query = searchParams.get('title')
return new Response(query)
}
2)设置cookie
1、通过 nextRequest 设置请求的token:
export async function GET(request) {
const token = request.cookies.get('token')
console.log(token);
request.cookies.set('token2',111212121)
return new Response()
}
2、通过 next/headers 包提供的 cookie 方法:
import { cookies } from "next/headers";
export async function GET(request) {
request.cookies.set('token','520')
const cookieStore = cookies()
const token = cookieStore.get('token')
return new Response('hello',{
status: 200,
headers: {
'Set-Cookie': `token=${token.value}`
}
})
}
3)处理headers:
1、通过 nextRequest 对象:
2、通过 next/headers:
4)获取请求体
如果是 formData:
5)如何设置cors(和刚刚设置cookie 差不多,是设置在第二个参数,第一个是响应体)
6)Streaming 流: