将项目升级到next.js 15

chat

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://nextjs.org/docs/app/building-your-application/upgrading/version-15#async-request-apis-breaking-change

本文通过 YUQUE WORDPRESS 同步自语雀

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/3248/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
将项目升级到next.js 15
next js 15的破坏性改动: https://nextjs.org/blog/next-15#async-request-apis-breaking-change 升级教程: https://nextjs.org/docs/app/building-your-ap……
<<上一篇
下一篇>>
chat