Next.jsコース

Reactアプリを、サーバー・検索・公開まで備えたサービスへ。

App Routerとレイアウトから始めて、サーバーでのデータ取得、API、SEO、 画像最適化、デプロイまでを1つのfleamaでつなぎます。

全3コース58レッスン(約15時間)
この道のりに含まれますフロントエンドエンジニアへの道

Reactアプリを、本番サービスへ育てよう

ページと共通レイアウト、サーバーとAPI、検索・SNS・公開を3コースで順に仕上げます。

STEP 1App Routerでページと共通レイアウトをつくる

Next.js入門:App Routerとレイアウト
学習有料プラン

Next.js入門

App Routerとレイアウト

ファイルベースルーティング、Link、loading、layoutを扱います。 React版fleamaをNext.jsのページ構成へ移行します。

21レッスン
始める

STEP 2サーバーでデータを取得し、APIとフォームをつくる

Next.jsフルスタック:サーバー・データ取得・API
学習有料プラン

Next.jsフルスタック

サーバー・データ取得・API

Server Components、動的ルート、Route Handler、Server Actionsを扱います。 データ取得から出品フォームまでをNext.js内へ実装します。

24レッスン
始める

STEP 3検索・SNS・表示速度を整え、本番公開する

Next.js公開設計:SEO・画像最適化・デプロイ
学習有料プラン

Next.js公開・SEO

SEO・画像最適化・デプロイ

metadata、OGP、Image、フォント最適化、本番ビルドを扱います。 公開URLを持つfleamaを完成させます。

13レッスン
始める

この知識が出る資格

ここで学ぶ内容は、次の試験でも問われます

人気のコース

いま多くの方が取り組んでいるコースです

エンジニアキャリアの歩き方

エンジニアキャリアの歩き方

フロントエンド、バックエンド、フルスタック、インフラ、AI/ML などエンジニアの主要キャリアパスと、各分野で求められるスキルセットや年収レンジを学べる無料コースです。これからエンジニア転職を考えている方や、自分の方向性を整理したい現役エンジニアを対象としています。約 5 時間 (1 日 30 分 × 10 日) で 30 レッスンを修了でき、修了後は自分に合った進路を見極めて学習計画を立てられるようになります。

30レッスン
プログラミング学習のはじめ方

プログラミング学習のはじめ方

プログラミング学習の進め方、言語の選び方、環境構築、つまずきやすいポイントの乗り越え方を、最短ルートで整理した無料の導入コースです。これから学習を始めたい完全初学者や、独学が続かず行き詰まっている方を対象としています。約 1 時間 (1 日 30 分 × 2 日) で 5 レッスンを修了でき、修了後は迷わず自分に合った学習ロードマップを描いて走り出せるようになります。

5レッスン
はじめての生成AI

はじめての生成AI

ChatGPT、Claude、Gemini など主要な生成 AI の仕組みと使い分け、ハルシネーション対策、業務活用シナリオを手を動かして学べる無料コースです。AI 初学者や、業務効率化を進めたいビジネスパーソンを対象に、技術背景がなくても進められる構成です。約 19 時間 (1 日 30 分 × 38 日) で 76 レッスンを修了でき、修了後は AI を使った業務自動化や情報整理を自分で設計できるようになります。

76レッスン
AIへの指示の出し方:プロンプト入門

AIへの指示の出し方:プロンプト入門

Chain of Thought、Few-shot、ロール指示、構造化出力、制約条件の設計など、生成 AI から狙った成果を引き出すプロンプト技法を体系的に学べるコースです。ChatGPT や Claude を業務で活用したいビジネスパーソンや AI エンジニアを対象としています。約 7 時間 (1 日 30 分 × 14 日) で 26 レッスンを修了でき、修了後は要件定義から評価まで再現性のあるプロンプトを自分で組めるようになります。

26レッスン