サーバーで動く部品
動く場所と、できること有料プラン
Next.jsフルスタック：サーバー・データ取得・API
Server ComponentsとClient Components、use client、サーバーfetch、asyncコンポーネント、動的ルート、params、notFound、キャッシュ、Route Handler、GET・POST API、Server Actions、フォームを扱う全24レッスンのフルスタックコースです。fleamaの商品取得と出品機能をNext.js内へ実装します。
レッスン
24件
所要時間
約6時間
ランク
中級
最初のレッスンを読む
10分・登録なしで読めます
動く図解・サーバーで動く部品
動く図解・サーバーで動く部品
目標
fleamaの商品一覧・詳細をサーバーで取得し、出品APIとフォームをNext.js内へ実装する
できるようになること
Server ComponentsとClient Componentsの境界を判断できる
サーバーfetchと動的ルートでデータを含むページを作れる
Route Handler・Server Actions・フォームで更新処理を構築できる
前提知識・必要な環境
必須
- • Next.js入門：App Routerとレイアウト 修了相当
環境
ブラウザ完結（インストール不要）
このコースに入っているもの
触れる図解
18本
手を動かす演習
21問
理解度クイズ
3問
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
実行場所が2つあることを体感し、部品をサーバー側とブラウザ側に正しく仕分けます。
useEffectを使わないサーバー取得と[id]の動的ルートで、一覧と詳細を作り直します。
アプリの中にAPIを作り、フォームからサーバーへデータを届ける道を通します。
このコースを終えると取れるバッジ
Next.js 第1コース
0 / 24 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
