Next.js App routerベースのChat GPTの作成

現在npx create-next-app@latest で nextjs セッティング時バージョンが 15 バージョンがインストールになっています。

15バージョンで講義を聞くとエラーが出る部分があり、15バージョンで受講される方は必須にご確認ください！

1. 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

2. 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

3. 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 インストールが必要

  • https://github.com/shadcn-ui/ui/issues/4302

• 実行時に tsconfig target 関連 warning が出たら target -> 2020 に上向き

上記のすべての変更は、以下のgithubで確認できます。参考にしてください！
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31 ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22