Next.js & React 実践ハンズオン TypeScriptとApp Routerで学ぶ、UI設計から本番デプロイまで
「なんとなく動く」から、実務で通用するフロントエンド開発へ。
研修概要
Next.js & React 実践ハンズオンは、TypeScriptを前提としたモダンフロントエンド開発を実務で活用するための「コンポーネント設計力」と「本番運用スキル」の習得を目標とした実践型研修です。
Next.js（App Router）の概要から環境構築・UI実装・API連携・認証基盤・本番デプロイまでを一気通貫で提供することで、「動いているが設計が属人化している」「デプロイをインフラ担当に丸投げしている」といった開発現場の課題を解消し、自立した実装力を持つエンジニアを育成させます。
こんな課題を持つ企業におすすめ
開発現場
- Reactを採用しているがコンポーネント設計の方針がチーム内で統一されておらず、新メンバーが参画するたびにコードの読み解きに時間がかかっている。
- Next.jsをPages Routerのまま運用しており、App Routerへの移行に必要な知識が社内に存在しない状態が続いている。
- フロントエンドとバックエンドAPIの通信設計が不十分で、APIキーや接続先情報がブラウザから参照できてしまうリスクを抱えている。
- フロントエンドエンジニアが自力でデプロイできず、Nginx・PM2を用いた本番環境構築をインフラ担当者に依存している。
本研修の到達目標
開発現場
- 1UI構築と型安全TypeScriptとshadcn/uiを活用した、堅牢で高品質なUIコンポーネントを構築できるようになります。
- 2Next.js最適化設計App Routerの特性を活かしたServer Component・Client Componentの適切な使い分けができるようになります。
- 3クリーンな設計（アーキテクチャ）DIコンテナとレイヤードアーキテクチャによる、保守性の高いコード設計を実装できるようになります。
- 4セキュアな通信と認証BFF（APIプロキシ）による安全なデータ通信と、NextAuth.jsを用いた認証基盤を実装できるようになります。
- 5運用環境の構築Linux環境におけるNode.js / Nginx / PM2を用いた、安定した実行環境の構成とデプロイができるようになります。
本研修の特長
最新構成（App Router）に完全対応
Next.js App Router・React 19・TypeScript前提という2026年現在の主流技術スタックで研修全体が構成されています。Pages Routerからの移行を検討するチームにも、学習の基盤として直結する内容を提供します。大手ベンダー系研修では遅れが生じやすいバージョン対応を、本研修では徹底させます。
DIコンテナ導入による本格アーキテクチャ学習
InversifyJSを用いたDI（依存性注入）コンテナの実践的な活用は、市場の他研修やオンライン教材にはほとんど見られない差別化ポイントです。UI層・カスタムHook・Service・Repositoryの4層アーキテクチャを演習を通じて習得させ、長期運用に耐えるコード設計力を養成します。
設計・認証・デプロイを一気通貫で習得
コンポーネント設計からBFFによるセキュアな通信設計、NextAuth.jsを用いた認証基盤の実装、そしてNginx・PM2を使った本番デプロイまでを1研修で体系化しています。全体の約70%が実習時間で構成されており、演習リポジトリ（GitHub提供）を活用して手を動かしながら確実に習得させます。
研修カリキュラム
| 日程 | 章・学習テーマ | 学習内容・習得スキル |
|---|---|---|
| 1日目 | 第1章：Next.jsとReact JSの概要 | Next.jsとReactの役割分担、SPAの基本構造、Next.jsの画面構成（App Router）を学びます。Server ComponentsとClient Componentsの概念を理解し、モダンフロントエンド開発の全体像を把握します。 |
| 第2章：環境構築とプロジェクト作成 | VSCode・WSL2・Node.jsによる開発環境を構築します。プロジェクトの新規作成・ディレクトリ構造の理解・InversifyJSの導入まで、実装の土台を整えます。 |
|
| 第3章：Reactコンポーネントとページ作成 | Reactコンポーネントの基本構造・TSX・コンポーネント間のデータ受け渡し（Props）を実装します。再利用可能なUI部品の設計方法を習得します。 |
|
| 第4章：Stateと本格的なUIコンポーネントの作成 | クライアントコンポーネントとイベント処理、Stateによるデータ管理を学びます。入力系・選択系・リスト表示コンポーネントを実装し、動的なUIを構築する力を身につけます。 |
|
| 第5章：shadcn/uiを用いたモダンUI開発 | shadcn/uiのセットアップから、フォーム・一覧表示・画像・ナビゲーションなどの実務頻出コンポーネントを活用します。高品質なUIを効率よく実装する手法を習得します。 |
|
| 2日目 | 第6章：バックエンドAPIとの連携とデータ通信 | REST APIとHTTP通信の基本・非同期処理・fetch APIによるデータ取得を実装します。BFF（APIプロキシ）の導入によるセキュアな通信設計と、DIコンテナによる依存性の注入を体系的に学びます。 |
| 第7章：バックエンドAPI仕様とNextAuth.jsの認証機能 | バックエンドAPIの仕様確認・Webアプリケーションの認証の仕組みを理解し、NextAuth.js（Auth.js）を用いた認証基盤を実装します。ミドルウェアによるルートガード（未認証ユーザーのアクセス制限）も実装します。 |
|
| 第8章：フォーム処理とAPIデータ連携 | APIプロキシ（BFF）を経由したユーザー登録・商品キーワード検索・商品登録の各機能を実装します。第6章で学んだ設計手法を踏襲し、実務レベルの一貫したアーキテクチャで実装させます。 |
|
| 第9章：アプリケーションのリリースとデプロイ | リリース版ビルドの手順と、Linux環境におけるNode.js・Nginx・PM2を使った本番環境の構成・デプロイフロー全体を学びます。フロントエンドエンジニアが自立してデプロイできる体制を構築します。 |
必要な受講環境と前提知識
受講環境
本研修の演習はWSL2（Ubuntu 24.04）上で実施します。演習解答はGitHubリポジトリ（https://github.com/fullness-MFurukawa/TS-Frontend-Exercise.git）で提供します。インターネットおよびGitHubへのアクセスが可能な環境をご準備ください。
| IDEと開発環境 | Visual Studio Code、WSL2（Ubuntu 24.04） |
|---|---|
| 拡張機能 | GitHub Pull Requests |
| SDK | Node.js v24.14.0、Next.js v16.2.1、React.js v19.2.4、Inversify.js v8.1.0 |
前提知識
- JavaScript / TypeScript：変数・関数・非同期処理（async/await）・モジュールの基本が理解できていること。型定義（interface・型エイリアス）の基礎があるとより望ましいです。
- HTML / CSS：基本的なマークアップとスタイリングが理解できていること。
- コマンドライン操作：ターミナル（bash）の基本操作（ファイル操作・npm コマンド実行）ができること。
お問い合わせ
本研修に関するご質問・お申し込みは、以下のフォームよりお問い合わせください。
担当者より2営業日以内にご連絡いたします。