Hiện tại, khi cài đặt nextjs bằng npx create-next-app@latest, phiên bản 15 đang được cài đặt.
Có một số lỗi xảy ra khi nghe bài giảng ở phiên bản 15, vì vậy nếu bạn đang tham gia khóa học ở phiên bản 15, hãy nhớ kiểm tra!
Vì cookie trong tiêu đề/tiếp theo được thay đổi thành không đồng bộ, bạn phải sử dụng chúng như sau.
import { cookies } from 'next/headers' // Before const cookieStore = cookies() const token = cookieStore.get('token') // After const cookieStore = await cookies() const token = cookieStore.get('token')Nguồn: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#cookies
cách trình bày. Các thông số đi vào trình xử lý trang và tuyến đường cũng đã được thay đổi thành không đồng bộ.
// Before type Params = { slug: string } type SearchParams = { [key: string]: string | string[] | undefined } export default async function Page({ params, searchParams,}: { params: Params searchParams: SearchParams }) { const { slug } = params const { query } = searchParams } // After type Params = Promise<{ slug: string }>type SearchParams = Promise<{ [key: string]: string | string[] | undefined }> export default async function Page(props: { params: Params searchParams: SearchParams }) { const params = await props.params const searchParams = await props.searchParams const slug = params.slug const query = searchParams.query }Nguồn: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page
thay đổi từ useFormState sang useActionState
// Before const [error, action] = useFormState(login, undefined); // After const [error, action, isPending] = useActionState(login, undefined);Ngoài ra, vì giá trị trả về thứ ba của useActionState chứa isPending nên bạn có thể sử dụng giá trị trả về thứ ba mà không cần sử dụng useActionStatus.
Các bản sửa lỗi khác
Khi console.error được hiển thị dưới dạng lỗi trong trình duyệt, lỗi đó sẽ được sửa trong nhật ký.
Nếu không có SheetTitle trong thành phần Trang tính thì sẽ xảy ra lỗi, vì vậy sau khi thêm SheeTitle, hãy gói nó vào VisuallyHidden và ẩn nó đi.
npm Yêu cầu cài đặt @radix-ui/react-visually-hidden
Nếu cảnh báo liên quan đến tsconfig target xuất hiện khi chạy, hãy nâng cấp target lên 2020.
Tất cả những thay đổi trên có thể được tìm thấy trên github bên dưới. Xin lưu ý!
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31 ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22