ゆめさくスキルゆめさくエンジニア女性向けエンジニアスクール
ゆめさくコード
無料

Next.js入門

App Routerによるルーティング、Layout、Server ComponentsとClient Components、サーバーでのデータ取得、動的ルート、API Routes、メタデータと画像最適化、デプロイまで、Next.jsによるフルスタックReact開発の基礎を、毎レッスン実際にコードを書き、フリマアプリ「fleama」を本番品質に育てながら学びます。

所要時間

約１ヶ月

ランク

中級

参加者

-

概要

App Routerによるルーティング、Layout、Server ComponentsとClient Components、サーバーでのデータ取得、動的ルート、API Routes、メタデータと画像最適化、デプロイまで、Next.jsによるフルスタックReact開発の基礎を、毎レッスン実際にコードを書き、フリマアプリ「fleama」を本番品質に育てながら学びます。

できるようになること

App Routerの規約に沿ってページ・レイアウト・動的ルートを設計できる

Server ComponentsとClient Componentsを判断基準を持って仕分けられる

useEffectを使わずサーバー側でデータを取得し、初期HTMLに中身を出せる

Route HandlerとフォームでアプリにAPIの受け口を持たせられる

メタデータ・OGP・画像最適化を整え、検索とSNSに強いアプリにできる

本番ビルドしてデプロイし、公開URLを持つポートフォリオを完成できる

前提知識・必要な環境

必須

  • • React実践修了(必須)
  • • フリマアプリfleamaを作った経験、または配布starterを動かせること
  • • TypeScriptでコンポーネントとpropsを書いたことがある

環境

ブラウザ完結（インストール不要）

内容

テキストでの解説

0

レッスン

コーディングの問題

51

レッスン

クイズ問題

7

レッスン

監修

ゆめさくコード編集部

プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。

生田 陸人

ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。

レッスン