SPAの課題を見る
最初の1枚が出るまでNext.jsとReactの境界、App Router、ファイルベースルーティング、Link、loading.tsx、layout.tsx、ネストしたレイアウト、ナビゲーションを扱う全21レッスンの入門コースです。React版fleamaをNext.jsへ移行し、静的ページと共通レイアウトを構築します。
レッスン
21件
所要時間
約5.5時間
ランク
中級
学習環境
ブラウザ完結
10分・登録なしで読めます
動く図解・SPAの課題を見る
動く図解・SPAの課題を見る
React版fleamaをApp Routerへ移行し、ページと共通レイアウトを構築する
App Routerの規約でページと動的でないルートを作れる
layout.tsxとネストしたレイアウトで共通UIを構成できる
Link・loading.tsx・ナビゲーションを適切に配置できる
ブラウザ完結（インストール不要）
触れる図解
15本
手を動かす演習
18問
理解度クイズ
3問
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
SPAの弱点を自分の目で確かめ、Next.jsが何を解くのかを掴んでから移行計画を立てます。
フォルダがそのままURLになる規約を身につけ、fleamaのページ骨格を移植します。
全ページ共通の枠と区画ごとの枠を定義し、迷わないナビゲーションを組み立てます。
このコースを終えると取れるバッジ
Next.js 第2コース
0 / 21 レッスン
動かしながら、仕組みや変化を目で確かめられます。
このコースを終えたあとに進むと、無理なく続けられます
