React ジャーニーの一部新着ジャーニーNext.jsを学ぶ
Reactのコンポーネントから本物のアプリまで進む、無料のインタラクティブなNext.js講座です。ルーティング、レイアウト、サーバーコンポーネントとクライアントコンポーネント、データ取得、Server Actionsを学びます。つまずいたときはAIヒントが助けてくれ、修了すると無料の修了証がもらえます。
47 レッスン41 チャレンジ99 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
知識を確かめるクイズ
無料の修了証明書
シラバス
このセクションは React ジャーニーの一部です。シラバス全体にはさらに多くのセクションがあります。下のプレビューをクリックして、ジャーニーページで確認してください。
- セクション 1基本概念42 レッスン
セクション 2
Next.js の基本
セクションを始める開始React コンポーネントから実践的なアプリへのステップアップ：ファイルシステムルーティング、レイアウト、サーバー/クライアントコンポーネント、データ取得、Server Actions、そして完成された Next.js プロジェクトの構築までを学びます。なぜNext.jsなのか
4 レッスン39ルーティングとリンク
6 レッスン516レイアウトとメタデータ
6 レッスン515サーバーとクライアント
6 レッスン515サーバー上のデータ
6 レッスン516Server Actions
5 レッスン413クライアント側のナビゲーション
5 レッスン515プロジェクト：Coddy Eats
9 レッスン9
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。
連続記録を築こう
継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。
12 日連続
明日も戻ってきて連続記録を維持しましょう！
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
ダブル・オア・ナッシング
7日中5日目
連続記録フリーズ
2 left
どこでも学べる
コーディングの旅を持ち歩こう！セットアップ不要、ダウンロード不要：開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。
あなたは一人じゃない
グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！
1
2
3
昇格ゾーンあらゆる学び方に対応
読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。
変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。
Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。
値は後から変えられます。再代入すると、名前は新しい値を指すようになります。
修了証を取得
完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。
修了証明書Pythonの基礎
LinkedInに追加CoddyでNext.jsを学ぶ理由
- ブラウザでNext.jsアプリを構築。Nodeのインストールもcreate-next-appも設定も不要 - 各レッスンでレイアウト、ページ、コンポーネントを備えた本物のappディレクトリを編集できます。
- 本番で使われる形のApp Router：フォルダ＝ルート、動的セグメント、ネストされたレイアウト、サーバー/クライアントコンポーネント、データフェッチ、ローディングとエラーの状態、サーバーアクションを使ったフォーム。
- あなたの実際のコードを読むAIヒント。ルートが404になったり、サーバーコンポーネントが壊れたりしたとき、答えを明かさずに問題の場所を示すヒントがもらえます。
- セクション修了で無料の修了証。Next.jsは最も需要の高いReactフレームワークで、モダンなフロントエンド求人がReactと並んで求めるスキルです。
Next.js学習に関するよくある質問
Next.jsとは何ですか？
Next.jsは、完全なWebアプリケーションを構築するためのReactフレームワークです。Reactがコンポーネントを提供し、Next.jsがその周りのすべて - ファイルシステムルーティング、ネストされたレイアウト、サーバーサイドレンダリング、データフェッチ、フォームやミューテーションを扱うサーバーアクション - を加えます。Vercelが開発・保守しており、本番環境で最も広く使われているReactフレームワークです。
Next.jsを学ぶ前にReactを知っている必要がありますか？
はい。Next.jsはReactの上に構築されているので、コンポーネント、props、stateに先に慣れておくべきです。このセクションはReactジャーニーの第2部で、直前の基礎セクションがまさにその土台をカバーしているため、順番に進めばスムーズです。
講座はApp Routerをカバーしていますか？
はい。セクションはモダンなApp Routerを軸に構成されています：appディレクトリ、フォルダ＝ルート、動的ルートセグメント、ネストされたレイアウト、サーバー/クライアントコンポーネントモデル。新しいNext.jsプロジェクトが標準で採用するアーキテクチャで、現在の求人が求めるものです。
サーバーコンポーネントとクライアントコンポーネントの違いは？
サーバーコンポーネントはサーバーでレンダリングされ、データを直接取得でき、ブラウザに送るJavaScriptが少なくなります。クライアントコンポーネントはブラウザで動き、state、イベント、エフェクトといったインタラクティブ性を担います。Next.jsアプリは両方を組み合わせるので、どちらを選ぶべきかの判断がこのセクションで鍛える中核スキルの一つです。
Next.jsはオンラインで無料で学べますか？
はい。インタラクティブなNext.jsセクションは無料です。充実したレッスン、即時フィードバック付きの本物のコード課題、AIヒントが揃っています。すべてブラウザで動くので、Nodeのインストールやプロジェクトの雛形作成なしですぐ始められます。
Next.js講座の修了後に修了証はもらえますか？
はい。セクションを修了すると、LinkedInで共有したり履歴書に追加したりできる無料の修了証を獲得できます。最終章で作り上げる完全なNext.jsプロジェクトも一緒にアピールできます。
