BEST

一口サイズでかじり取るNext.js

「ひとくちシリーズ」の第3弾！世界で最も親切で詳細なNext.js講座です。App Routerだけでなく、Page Routerまでプロジェクトを通じて学んでいきます。

（5.0）受講レビュー 599件

受講生 5,658名

難易度初級

受講期間 無制限

winterlood

React

TypeScript

Next.js

React

TypeScript

Next.js

お知らせ一覧

winterlood

･

修正済み

一口パッチノート）Next.js 15関連講義アップデートガイド

こんにちは一口Next受講生の皆さんイ・ジョンファンです。

2024年10月21日、Next.js 15バージョンがついに正式にリリースされました🎉

私たちのレッスンは15 RC（15.0.0-rc.0）バージョンに基づいて作成されたため

現在リリースされている15の最新バージョンと大きな違いはありません。

それでも既存の講義内容と一部変わる事項がありますので、このような案内をお送りします。

機能の変更）searchParamsとparamsは非同期で提供されます。

2024年10月21日以前にNext 15 RCバージョンで受講した受講生の皆さんは、
searchParamsとparamsを次のように同期的に使用した可能性があります。

// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: { q: string }; }) { const { q } = searchParams; return {q}

; } // paramsを取り出す export default async function Page({ params, }：{ params：{id：string}; }) { const {id} = params; return

{id}

; }

しかし、21日に正式リリースされたNext 15（latest）バージョンからは、searchParamsとparamsが非同期的に提供されるという。したがって、これからは、次のようにasync、awaitを利用して値を取り出すように設定する必要があります。講義でもその内容を反映するために一部のチャプターを再録画しました。

// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const { q } = await searchParams; return {q}

; } // paramsを取り出す export default async function Page({ params, }：{ params: Promise<{ id: string }>; }) { const { id } = await params; return

{id}

; }

ここに加えて、cookies、headerなどのブラウザから受け取ったリクエストに依存するデータは、今後とも非同期的に提供されるそうです。私たちの講義ではcookiesやheaderについては取り上げていませんが、今後の個人プロジェクトを進める際に活用する可能性が高い機能ですので、ぜひ知っておいてほしいと思います。以下は関連記事リンクです。

https://nextjs.org/blog/next-15#async-request-apis-breaking-change