Next.js入門
-React応用、TypeScript、tRPC、Prisma-
フロントエンド/バックエンド双方を備えたWebアプリケーションを高い生産性で開発するためのNext.js入門コースです。

当コースは、Reactをベースとしたフレームワークとして人気のNext.jsを中心に、TypeScriptおよびその静的な型システムを前提としたtRPCやPrismaといったライブラリを活用して、型安全に生産性高くWebアプリケーションを開発するためのコースです。
Next.jsは、Reactを基としてサーバーサイドレンダリングや静的サイトの生成、設定無しでのルーティング(ファイルベースルーティング)、状態管理やキャッシュ管理を兼ね備えたデータフェッチなどなど、昨今のWebアプリケーションをしっかりと作成するための様々な機能を備えたJavaScriptフレームワークです。
tRPCは、TypeScriptで記述されており、TypeScriptの型システムを上手く活用してフロントエンドとバックエンドのやり取りに静的な型を導入する事ができるライブラリです。tRPCを導入することで生産性高く型安全にWeb APIを開発できます。
PrismaはTypeScriptライブラリで、データベースへのアクセスを行うアプリケーションを素早く型安全に記述することができます。Prismaはデータモデルの作成、データ操作、マイグレーションなど様々な機能を提供しています。

※本コースは2025年4月より改訂版にて実施いたします。
 2025年4月以降のコース情報はこちらをご参照ください。



※受講に関する注意点※
進行の都合上、研修開始時間を過ぎてからのご参加はご遠慮いただいております。
大変恐れ入りますが、研修開始時間までにご参加いただけていない場合、
当日キャンセル扱いをさせていただく場合がございますのでご注意ください。

開催日程

オンライン・オフライン(対面)の開催がございます。 オンライン研修を希望される方は、必ずお申し込み前に「オンライン研修環境」を確認してください。
オンライン
オフライン

学習目標

■ Next.jsを使ってフロントエンド/バックエンド双方を備えたWebアプリケーションを作成できる

対象者

■ Reactの発展としてNext.jsを学びたい方
■ ReactやNode.jsの基礎は学んだがWebアプリケーションを実際にどう作成していくのか体験したい方

前提条件

■ Reactを使って簡単なアプリケーションを作成できる方
■ Node.jsを使って簡単なアプリケーションを作成できる方
■ 弊社オープンコース『React入門』『Node.js入門』『TypeScriptイントロダクション』をご受講いただいた方もしくは、同等の技術を習得している方
■ ECMAScript2015以降の文法でJavaScriptのコーディングを行ったことのある方

研修概要

  • 実行環境
    ■ Next.js v13以上
    ■ React v18以上
    ■ Node.js v18以上
    ■ TypeScript v5以上
    ■ Chrome
    ■ Visual Studio Code

    ※ 使用するソフトウェアおよびバージョンについては予告なく変更する可能性がありますのでご了承ください。
  • 配布資料
    オンライン参加の方は、研修当日にPDFのテキストを配布いたします。
    オフライン(対面)参加の方は、研修当日に紙媒体のテキストを配布いたします。
  • 受講料
    121,000円(税込)/人
  • お支払い
    研修終了後に請求書払いとなります。
    請求書は研修終了日の属する月の月末までに送付いたします。
  • 開催日数
    2日間
  • 時間
    9時30分~17時00分

カリキュラム

■ Next.jsの基礎
 □ Next.jsの基礎
 □ Reactとの違い
 □ Server Side Rendering
 □ ファイルベースルーティング
 □ データフェッチ
 □ CSSの適用
■ サーバサイドtRPC Routerの作成
 □ tRPCとは
 □ tRPCによるサーバーサイド処理の実装
 □ エラーハンドリング
 □ クライアントからの型安全なWeb APIコール
■ Prismaによるデータベースアクセス
 □ Prismaとは
 □ Prismaを使ったデータベース操作
 □ データベースマイグレーション
 □ Next.js、tRPC、Prismaを統合したアプリケーションの作成

■ 付録:TypeScript要点速習

※最新でより良い内容をお届けするため、一部の学習項目を予告なく変更する可能性がありますのでご了承ください。

オンライン研修環境

  • 使用ツール
    動画配信:Zoom
    質疑応答:オンラインチャットシステム(Mattermost)
    演習環境:仮想デスクトップ

    ※業務用PCにZoomアプリをインストールできない場合は、ブラウザからのご参加をお願いします。
    ※Zoomのシステム要件について、より詳細な情報は、こちらをご参照ください。
    ※Mattermostおよび演習環境は弊社にてご用意いたします
  • システム要件
    ・インターネットに常時接続できること
     (アクセス制限のないネットワーク環境をご利用ください)
    ・Webカメラおよびマイク
    ※PC本体の他に、モニターやiPad等の拡張ディスプレイをご用意いただくことを推奨いたします。
     (1台:Zoom、オンラインチャットシステム用、1台:演習環境用)
    ※事前にアクセス確認をご希望される方はお問い合わせください
  • 対応OS
    Windows
    上記以外の環境でもご受講いただくことが可能ですが、操作感が異なる可能性がある点をご了承ください。
  • WEBブラウザ
    Google Chrome
    上記以外の環境でもご受講いただくことが可能ですが、操作感が異なる可能性がある点をご了承ください。

開催日程

  • 申込受付終了
    2024年11月11日〜2024年11月12日 (2日間) 【開催終了】
    【会場】オンライン
    【価格】121,000円 (税込)/人
  • 申込受付終了
    2024年12月9日〜2024年12月10日 (2日間) 【中止】
    【会場】オンライン
    【価格】121,000円 (税込)/人
  • 申し込む
    2025年1月9日〜2025年1月10日 (2日間) 【開催未定】
    【受付】2024年12月25日まで
    【会場】オンライン
    【価格】121,000円 (税込)/人
  • 申し込む
    2025年1月23日〜2025年1月24日 (2日間) 【開催未定】
    【受付】2025年1月15日まで
    【会場】オンライン
    【価格】121,000円 (税込)/人
  • 申し込む
    2025年2月20日〜2025年2月21日 (2日間) 【開催未定】
    【受付】2025年2月12日まで
    【会場】オンライン
    【価格】121,000円 (税込)/人
  • 申し込む
    2025年3月13日〜2025年3月14日 (2日間) 【開催未定】
    【受付】2025年3月5日まで
    【会場】オンライン
    【価格】121,000円 (税込)/人

学習目標

■ Next.jsを使ってフロントエンド/バックエンド双方を備えたWebアプリケーションを作成できる

対象者

■ Reactの発展としてNext.jsを学びたい方
■ ReactやNode.jsの基礎は学んだがWebアプリケーションを実際にどう作成していくのか体験したい方

前提条件

■ Reactを使って簡単なアプリケーションを作成できる方
■ Node.jsを使って簡単なアプリケーションを作成できる方
■ 弊社オープンコース『React入門』『Node.js入門』『TypeScriptイントロダクション』をご受講いただいた方もしくは、同等の技術を習得している方
■ ECMAScript2015以降の文法でJavaScriptのコーディングを行ったことのある方

研修概要

  • 実行環境
    ■ Next.js v13以上
    ■ React v18以上
    ■ Node.js v18以上
    ■ TypeScript v5以上
    ■ Chrome
    ■ Visual Studio Code

    ※ 使用するソフトウェアおよびバージョンについては予告なく変更する可能性がありますのでご了承ください。
  • 配布資料
    オンライン参加の方は、研修当日にPDFのテキストを配布いたします。
    オフライン(対面)参加の方は、研修当日に紙媒体のテキストを配布いたします。
  • 受講料
    121,000円(税込)/人
  • お支払い
    研修終了後に請求書払いとなります。
    請求書は研修終了日の属する月の月末までに送付いたします。
  • 持ち物
    特にございません
  • 開催日数
    2日間
  • 時間
    9時30分~17時00分

カリキュラム

■ Next.jsの基礎
 □ Next.jsの基礎
 □ Reactとの違い
 □ Server Side Rendering
 □ ファイルベースルーティング
 □ データフェッチ
 □ CSSの適用
■ サーバサイドtRPC Routerの作成
 □ tRPCとは
 □ tRPCによるサーバーサイド処理の実装
 □ エラーハンドリング
 □ クライアントからの型安全なWeb APIコール
■ Prismaによるデータベースアクセス
 □ Prismaとは
 □ Prismaを使ったデータベース操作
 □ データベースマイグレーション
 □ Next.js、tRPC、Prismaを統合したアプリケーションの作成

■ 付録:TypeScript要点速習

※最新でより良い内容をお届けするため、一部の学習項目を予告なく変更する可能性がありますのでご了承ください。

開催日程

この研修を見ている方はこちらの研修も見ています

コースフロー

フロントエンド開発を学ぶ JavaScriptで学ぶ初めてのプログラミング HTML/CSS入門 モダンJavaScript入門 TypeScriptイントロダクション JavaScript応用 SvelteKit入門 React入門 Angular入門 Vue.js入門 jQueryによるAjaxアプリケーション開発 Node.js入門 Next.js入門 Reduxワークショップ JavaScriptテスト入門 Nuxt&Node.jsによるSPA開発ワークショップ
フロントエンド開発を学ぶ