READ, TRY, UNDERSTAND
レッスンを読む18
ひとつのテーマを、ひとつずつ。コードと小さな実習で理解をつなげよう。
01
入門 · LESSON 01
✓ 完了12分 →02Next.jsの全体像をつかむ
Reactとの関係と、Next.jsが受け持つ仕事を整理します。
入門 · LESSON 02
✓ 完了20分 →03先に知っておきたいWebの基礎
HTML・CSS・JavaScript・HTTPの、今必要な範囲を押さえます。
入門 · LESSON 03
✓ 完了25分 →04Reactの部品・JSX・props
小さなUIを関数に分け、データを渡して使い回します。
入門 · LESSON 04
✓ 完了25分 →05stateで、操作に反応する画面へ
イベントとstateをつなぎ、必要な状態だけを持たせます。
基礎 · LESSON 05
✓ 完了20分 →06最初のNext.jsプロジェクト
開発サーバーを起動し、最初のページを自分の言葉に変えます。
基礎 · LESSON 06
✓ 完了25分 →07フォルダーでURLを設計する
pageとlayoutを使い、複数ページに共通の骨格を作ります。
基礎 · LESSON 07
✓ 完了25分 →08動的ルートとページの移動
一覧から詳細へ。URLの値とLinkで画面をつなぎます。
基礎 · LESSON 08
✓ 完了30分 →09ServerとClientの境界を理解する
「どこで動くか」を整理すると、Next.jsのコードが読みやすくなります。
基礎 · LESSON 09
✓ 完了30分 →10必要なデータを取得する
取得先、待ち時間、失敗の扱いまでをセットで考えます。
発展 · LESSON 10
✓ 完了25分 →11いつ表示を作る？ レンダリング入門
事前生成・リクエスト時の処理・ブラウザーの操作を分けて考えます。
発展 · LESSON 11
✓ 完了35分 →12キャッシュと更新を、セットで設計する
速さと新しさのバランスを、設定ごとに整理します。
発展 · LESSON 12
✓ 完了35分 →13フォームとServer Actions
入力を受け取り、安全にサーバーへ渡す流れを学びます。
発展 · LESSON 13
✓ 完了25分 →14Route Handlersとデータ層
JSONの入口と、データを扱う処理の境界を作ります。
基礎 · LESSON 14
✓ 完了20分 →15読み込み・0件・404・失敗に備える
うまくいかなかったときにも、次の一歩が分かる画面にします。
基礎 · LESSON 15
✓ 完了30分 →16見た目・画像・ページ情報を整える
読みやすさ、表示の安定、共有時の伝わりやすさを仕上げます。
発展 · LESSON 16
✓ 完了30分 →17認証・権限・秘密の扱い
ログインの有無だけでは守れないものを、正しい場所で確認します。
発展 · LESSON 17
✓ 完了30分 →18テストして、公開できる状態へ
動いたことを確かめ、使う機能に合う公開先を選びます。
発展 · LESSON 18
✓ 完了30分 →次に学ぶことと、最終ミニ制作
基本を一つのアプリに結び、必要な発展領域を選びます。
該当するレッスンがありません。検索語や絞り込みを変えてみてください。