将项目升级到next.js 15

next js 15的破坏性改动:
https://nextjs.org/blog/next-15#async-request-apis-breaking-change
升级教程:
https://nextjs.org/docs/app/building-your-application/upgrading/version-15
项目升级:
执行 codemod 脚本
npx@next/codemod@canaryupgradelatest
cookie 的用法修改
旧的:
cookies().set('session', userId, {
httpOnly: true,
secure: true,
expires: expiresAt,
sameSite: 'lax',
path: '/',
})
新的:
const cookieStore = await cookies();
cookieStore.set('session', userId, {
httpOnly: true,
secure: true,
expires: expiresAt,
sameSite: 'lax',
path: '/',
})
header 的用法修改
旧的:
const headersList = headers();
新的:
const headersList = await headers();
页面参数的修改
旧的:
'use client';
import { useEffect } from 'react';
import { BaseApi } from '@/req';
import { LocalStorageEnum } from '@/types';
export default function LoginPage({ searchParams } :{ searchParams: { [key: string]: string } }) {
const userId = searchParams?.user_id;
const autoLoginToken = searchParams?.['auto-login-token'];
return <div>Login 登录页</div>;
}
新的:
export default async function LoginPage({ searchParams } :{ searchParams: Promise<{ [key: string]: string }>}) {
const { userId, autoLoginToken } = await searchParams;
return <div>Login 登录页</div>;
}
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/3248/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。


共有 0 条评论