Menu
Coddy logo textTech
学習を始める
flag Ja icon日本語down icon
react iconReact ジャーニーの一部新着ジャーニー

Next.jsを学ぶ

ReactコンポーネントからリアルなアプリまでたどりつくNext.jsの無料インタラクティブ講座です。ファイルシステムルーティング、ネストされたレイアウト、サーバー/クライアントコンポーネント、データフェッチ、ローディングとエラーの状態、サーバーアクションを学び、最後は完全なNext.jsプロジェクトで締めくくります。Reactジャーニーの一部なので、必要なコンポーネントの基礎もすぐそば。つまずいたらAIヒントが助け、修了時には無料の修了証がもらえます。

学習を始める(無料)
シラバスを見る

1,000+ 人のcoddersが登録中

47 レッスン32 チャレンジ99 クイズの問題

  • 初心者向け
  • sparkles iconAIによるコーディングサポート
  • hint icon実践的なインタラクティブレッスン
  • volume On icon全レッスンに音声ナレーション付き
  • quiz icon知識を確かめるクイズ
  • certificate icon無料の修了証明書

シラバス

1 セクション1 プロジェクト47 レッスン32 チャレンジ99 クイズの問題

このセクションは React ジャーニーの一部です。シラバス全体にはさらに多くのセクションがあります - 下のプレビューをクリックして、ジャーニーページで確認してください。

  1. セクション 1基本概念42 レッスン
  2. セクション 2

    Next.js の基本

    セクションを始める開始開く閉じる    React コンポーネントから実践的なアプリへのステップアップ：ファイルシステムルーティング、レイアウト、サーバー/クライアントコンポーネント、データ取得、Server Actions、そして完成された Next.js プロジェクトの構築までを学びます。47 レッスン32 チャレンジ99 問題1 プロジェクト

    なぜNext.jsなのか

    4 レッスン39

    ルーティングとリンク

    6 レッスン516

    レイアウトとメタデータ

    6 レッスン515

    サーバーとクライアント

    6 レッスン515

    サーバー上のデータ

    6 レッスン516

    Server Actions

    5 レッスン413

    クライアント側のナビゲーション

    5 レッスン515

    プロジェクト：Coddy Eats

    プロジェクト9 レッスン
React ジャーニーのシラバス全体を見る
使える機能
コーディングを学ぶために使うすべて

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

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

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to 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プロジェクトも一緒にアピールできます。
Coddy programming languages illustration

Learn Next.js の基本 with Coddy

始める