Currently, when setting up nextjs with npx create-next-app@latest, version 15 is installed.
If you are taking the lecture in version 15, there are parts where errors occur, so those who are taking the lecture in version 15 must check this!
As cookies in next/headers have been changed to asynchronous, you should use them as follows.
import { cookies } from 'next/headers' // Before const cookieStore = cookies() const token = cookieStore.get('token') // After const cookieStore = await cookies() const token = cookieStore.get('token')Source: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#cookies
The params coming into layout.page and route handler have also been changed to asynchronous.
// 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 }Source: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page
Changed useFormState -> useActionState
// Before const [error, action] = useFormState(login, undefined); // After const [error, action, isPending] = useActionState(login, undefined);Additionally, since the third return value of useActionState has isPending, you can use the third return value without using useActionStatus.
Other changes
console.error is displayed as an error in the browser and modified to log
If there is no SheetTitle in the Sheet component, an error occurs and after adding SheeTitle, it is wrapped with VisuallyHidden and hidden.
npm install @radix-ui/react-visually-hidden requires installation
If a warning related to tsconfig target appears when running, upgrade target to 2020.
All the changes above can be found on github below. Please take note!
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31 ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22