Next.js 問題集

Next.jsで「Hydration failed because the initial UI does not match what was rendered on the server」というエラーが発生しました。最も一般的な原因はどれですか？

Next.js App Routerで「You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client"」と表示されました。正しい対処法は？

Next.jsプロジェクトで、あるファイルからfsモジュールをimportしたところ「Module not found: Can't resolve 'fs'」エラーが発生しました。以下のうち、このエラーが発生しない書き方はどれですか？

Next.jsでprocess.env.API_URLをクライアント側のコンポーネントで参照したところundefinedになりました。正しい対処法は？

Next.js App Routerで動的ルート（例: /blog/[slug]）を静的に生成（SSG）するために使用する関数はどれですか？

Next.jsで「Error: Dynamic server usage: headers」というエラーが発生し、ビルドが失敗しました。原因と対処法は？

Next.jsのnext/imageコンポーネントで外部URLの画像を表示しようとしたところ「Error: Invalid src prop」が発生しました。対処法は？

Next.js App Routerで「Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"」というエラーが表示されました。このエラーの意味は？

Next.jsのmiddleware.tsが全ルートに適用されてしまい、静的アセット（CSS・画像など）のリクエストにも影響を与えています。正しい対処法は？

Next.js App Routerでfetch()したデータが更新されず古い情報が表示され続けます。データを定期的に再取得するための正しい方法は？

Next.jsで以下のコンポーネントをページに配置したところ、ブラウザのコンソールに「Hydration failed because the server rendered HTML didn't match the client」というエラーが出ました。原因として最も適切なものはどれですか？ function Greeting() { return <p>現在時刻: {new Date().toLocaleTimeString()}</p>; }

Vercelで新しいNext.jsプロジェクトをGitHubリポジトリと連携してデプロイした。その後、mainブランチにpushするたびに本番環境が自動更新されるのはなぜか。

VercelにデプロイしたNext.jsのAPI Routeが、ローカル環境では正常に動作するのに本番環境では504 FUNCTION_INVOCATION_TIMEOUTエラーになる。Hobbyプランを使用している場合、最も可能性が高い原因はどれか。

Next.jsアプリをVercelにデプロイしたところ、ダッシュボードで設定した環境変数SUPABASE_URLの値がブラウザ側のコンポーネントからアクセスするとundefinedになる。サーバーサイドのAPI Routeからは正常に取得できている。この問題の原因として正しいものはどれか。

Next.jsのAPI Routeでbcryptライブラリをインポートしてパスワードのハッシュ化を行っている。ローカルでは正常に動作するが、Vercelにデプロイすると500 FUNCTION_INVOCATION_FAILEDエラーが発生する。この原因として最も適切なものはどれか。

Next.jsで別ページに遷移するとき、専用の Link コンポーネントを使わずに普通の a タグを使うとどうなる？

Next.jsで app/users/[id]/page.tsx を作成した。この状態でブラウザから /users/123 にアクセスするとどうなる？

React単体で作ったページとNext.jsで作ったページ。GoogleのBotがアクセスしたときの「最初に受け取るHTML」はどう違う？