Next.js入門 — App Router編
解説で理解を深める
Next.jsの問題一覧
該当件数43件
App Router
9問App Routerで商品一覧ページを作るとき、データベースから商品を取得してHTMLに表示するだけで、クリック操作やuseStateは使いません。最も適切な実装はどれですか？
Server Componentのpage.tsxから、ボタンのクリック処理を持つClient Componentを読み込んで表示したいです。正しい理解はどれですか？
App Routerで管理画面のサイドバーをlayout.tsxに置いたところ、配下ページを移動してもサイドバーの開閉状態を保ちたいです。最も適切な考え方はどれですか？
App Routerで一部のデータ取得が遅いダッシュボードを作っています。ページ全体の表示を待たせず、遅い部分だけローディング表示にしたい場合、最も適切なのはどれですか？
ログイン画面にはヘッダーを出さず、管理画面には共通サイドバーを出したいです。ただしURLに余計なパスは増やしたくありません。App Routerで適切なのはどれですか？
商品IDに対応するデータが存在しない場合、App Routerでそのルートの404画面を表示したいです。page.tsx内で最も適切なのはどれですか？
商品一覧ページのデータ取得が遅いため、そのルートだけローディングUIを表示したいです。App Routerで最も簡単な方法はどれですか？
同じlayout配下でページ移動するたびに、フォームUIを必ず初期状態からマウントし直したいです。App Routerで検討すべきファイルはどれですか？
ダッシュボードを表示したまま、通知詳細を右側パネルとして同時に表示できる構成にしたいです。App Routerで検討すべき機能はどれですか？
ルーティング
6問ログイン画面にはヘッダーを出さず、管理画面には共通サイドバーを出したいです。ただしURLに余計なパスは増やしたくありません。App Routerで適切なのはどれですか？
/docs、/docs/getting-started、/docs/api/routes のように階層の深さが変わるドキュメントページを1つのルートで扱いたいです。適切なフォルダ名はどれですか？
商品IDに対応するデータが存在しない場合、App Routerでそのルートの404画面を表示したいです。page.tsx内で最も適切なのはどれですか？
Server Actionで記事を作成したあと、作成した記事詳細ページへ移動させたいです。適切な処理はどれですか？
同じlayout配下でページ移動するたびに、フォームUIを必ず初期状態からマウントし直したいです。App Routerで検討すべきファイルはどれですか？
ダッシュボードを表示したまま、通知詳細を右側パネルとして同時に表示できる構成にしたいです。App Routerで検討すべき機能はどれですか？
Server Components
5問App Routerで商品一覧ページを作るとき、データベースから商品を取得してHTMLに表示するだけで、クリック操作やuseStateは使いません。最も適切な実装はどれですか？
Server Componentで取得した記事一覧に、クライアント側だけで動く検索フィルターを追加したいです。設計として最も適切なのはどれですか？
App Routerで一部のデータ取得が遅いダッシュボードを作っています。ページ全体の表示を待たせず、遅い部分だけローディング表示にしたい場合、最も適切なのはどれですか？
App Routerでビルド時に「Event handlers cannot be passed to Client Component props.」というエラーが出ました。原因として最も近いものはどれですか？
外部APIの秘密キーを使って商品データを取得したいです。App Routerで秘密キーを安全に扱いやすい実装はどれですか？
Client Components
4問Server Componentで取得した記事一覧に、クライアント側だけで動く検索フィルターを追加したいです。設計として最も適切なのはどれですか？
Server Componentのpage.tsxから、ボタンのクリック処理を持つClient Componentを読み込んで表示したいです。正しい理解はどれですか？
App Routerで管理画面のサイドバーをlayout.tsxに置いたところ、配下ページを移動してもサイドバーの開閉状態を保ちたいです。最も適切な考え方はどれですか？
Client Componentで「async/await is not yet supported in Client Components」というエラーが出ました。最も適切な修正はどれですか？
データ取得
4問管理画面の売上ダッシュボードで、リクエストごとに必ず最新データを表示したいです。App RouterのServer Component内fetchで最も適切な指定はどれですか？
商品詳細ページをキャッシュしつつ、管理画面で商品を更新したタイミングで該当商品のキャッシュだけを破棄したいです。最も適切な組み合わせはどれですか？
同じリクエスト中にpage.tsxとgenerateMetadataで同じ商品APIをfetchしています。重複実行を避けるためのNext.jsの挙動として正しいものはどれですか？
外部APIの秘密キーを使って商品データを取得したいです。App Routerで秘密キーを安全に扱いやすい実装はどれですか？
キャッシュ
4問管理画面の売上ダッシュボードで、リクエストごとに必ず最新データを表示したいです。App RouterのServer Component内fetchで最も適切な指定はどれですか？
商品詳細ページをキャッシュしつつ、管理画面で商品を更新したタイミングで該当商品のキャッシュだけを破棄したいです。最も適切な組み合わせはどれですか？
同じリクエスト中にpage.tsxとgenerateMetadataで同じ商品APIをfetchしています。重複実行を避けるためのNext.jsの挙動として正しいものはどれですか？
Route Handlerで外部サービス向けのJSONを返しています。レスポンスをブラウザやCDNで一定時間キャッシュさせたい場合、適切な方法はどれですか？
Route Handlers
3問Server Actions
2問Middleware
1問Metadata・SEO
2問デプロイ
4問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エラーが発生する。この原因として最も適切なものはどれか。
その他
13問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で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>; }
Next.jsで別ページに遷移するとき、専用の Link コンポーネントを使わずに普通の a タグを使うとどうなる？
Next.jsで app/users/[id]/page.tsx を作成した。この状態でブラウザから /users/123 にアクセスするとどうなる？
React単体で作ったページとNext.jsで作ったページ。GoogleのBotがアクセスしたときの「最初に受け取るHTML」はどう違う？
Next.jsとは
Next.jsは、Vercelが開発するReactベースのフルスタックフレームワークです。App Router、Server Components、Server Actions、自動コード分割、画像最適化など、プロダクションに必要な機能が標準で揃っています。SSR・SSG・ISRを柔軟に組み合わせることで、パフォーマンスとSEOに優れたWebアプリケーションを構築できます。
なぜNext.jsを学ぶべきか
Next.jsはReactエコシステムで最も採用されているフレームワークの一つで、企業の採用実績も急速に増えています。App RouterやServer Componentsなど最新のReactアーキテクチャを実践的に学べるほか、デプロイ・キャッシュ戦略・ミドルウェアなどフルスタック開発のスキルが身につきます。
出題トピック
App Router と Server Components
App Routerのファイルベースルーティング、Server ComponentとClient Componentの使い分け、"use client"ディレクティブの適切な配置を出題します。
データフェッチとキャッシュ
fetch()のキャッシュ戦略、revalidateによるISR、generateStaticParamsでの静的生成、動的レンダリングとの使い分けを扱います。
Server Actions
"use server"ディレクティブによるServer Actionsの定義、フォーム処理、Client Componentへの関数の受け渡しパターンを問います。
実践的なエラー解決
Hydrationエラー、Module not found、Dynamic server usage、next/imageの設定エラーなど、開発現場で頻出するエラーの原因と対処法を出題します。
こんな方におすすめ
- Reactを習得済みでフレームワークに挑戦したい方
- App RouterやServer Componentsを実践的に学びたい方
- SSR/SSG/ISRの使い分けを理解したいエンジニア
- Next.jsの頻出エラーの解決方法を身につけたい方