← クエスト一覧へ

Next.js基礎 ガイドブック

🏠

はじめに

2 記事
1
Next.js コースで学べること

このコースでは、React をベースにした Web フレームワーク Next.js の基礎を学びます。
現代のフロントエンド開発で最も広く使われているフレームワークの1つで、Vercel・Netflix・TikTok など有名サービスでも採用されています。

📚 このコースで学べること
📁
ファイルベースルーティング
ファイル置くだけでURLになる仕組み
⚡
SSR / SSG
サーバーレンダリングと静的生成の使い分け
🔗
Link・Image
高速遷移・画像最適化コンポーネント
🔌
APIルート
Next.jsだけでバックエンドも作れる
✅ 学習後にできるようになること
  • Next.js プロジェクトの基本構造を理解してコードを読み書きできる
  • ファイルベースルーティングでページを作れる
  • getStaticProps / getServerSideProps でデータを取得できる
  • Link・Image コンポーネントを正しく使える
  • APIルートでシンプルなバックエンドを作れる
  • ブログ・ポートフォリオなどのシンプルなWebアプリを作れる
2
前提知識と学習の進め方

Next.js を学ぶ前に、以下の知識があると スムーズに進められます。

⚠️ 前提知識
必須
HTML・CSS の基礎（タグ・クラス・スタイルが分かる）
必須
JavaScript の基礎（変数・関数・配列・アロー関数・分割代入）
推奨
React の基礎（コンポーネント・props・useState）
あると良い
Node.js / npm の基本（パッケージ管理の概念）
📖 学習の進め方
  1. まずスライドを最後まで読もう（各クエストに3枚ずつあります）
  2. クイズクエストは選択肢をよく読んでから回答しよう
  3. コードクエストは実際に書いて実行して確認しよう
  4. 分からなかったらヒントボタンと見本コードを活用しよう
  5. 全クエストが終わったら、自分でプロジェクトを作ってみよう
⏱️ 目安の学習時間

• 10クエスト全体：2〜4時間（1日1〜2クエストのペースがおすすめ）
• React基礎がある人：2〜3時間
• JavaScript初心者から：1週間程度（先にReactコースを完了してから）