現在npx create-next-app@latest で nextjs セッティング時バージョンが 15 バージョンがインストールになっています。
15バージョンで講義を聞くとエラーが出る部分があり、15バージョンで受講される方は必須にご確認ください！
next/headers の cookies が非同期に変更されるので、以下のように使用してください。
import { cookies } from 'next/headers' // Before const cookieStore = cookies() const token = cookieStore.get('token') // After const cookieStore = await cookies() const token = cookieStore.get('token')ソース: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#cookies
layout. page, route handler に入る params も非同期に変更されました。
// 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 }ソース: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page
useFormState -> useActionState に変更
// Before const [error, action] = useFormState(login, undefined); // After const [error, action, isPending] = useActionState(login, undefined);さらに、useActionStateの3番目の戻り値にisPendingがあるため、useActionStatusを使用せずに3回目の戻り値を使用しても問題ありません。
その他の修正
console.error時にブラウザにerrorとして公開され、logに変更
SheetコンポーネントでSheetTitleがない場合、エラーが表示され、SheeTitleを追加した後にVisuallyHiddenでラップしてhiddenを処理します。
npm install @radix-ui/react-visually-hidden インストールが必要
実行時に tsconfig target 関連 warning が出たら target -> 2020 に上向き
上記のすべての変更は、以下のgithubで確認できます。参考にしてください！
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31 ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22