【期間限定：ほぼチャプター無料公開 (公開終了期間未定)】

フロントエンドはNext.jsで、バックエンドはNestJSでやりたいとなった時に参考になるようにまとめようと思います。実務でも使えると思いますので、ぜひ活用ください。

説明は簡潔明瞭にするので、わからない部分はさらにググってみてください。本書の目標は「何となくわかるようになる」です。

なお、環境はMacにて動作確認しております。

本書で学べること
・データベースを利用したバックエンド(API)の構築方法
・データベースにデータをCRUD(追加・読取・更新・削除)する方法
・フロントエンドからバックエンド(API)を使う方法
・Next.jsとNestJSのおすすめディレクトリ構成

キーワード(技術スタック)
「Next.js」「NestJS」「TypeScript」「REST API」「TypeORM」「MySQL」「TailwindCSS」「ESLint」「Prettier」「API」「DTO」「MVC」「DI」

簡易TODOウェブアプリの開発-Next.js×NestJS(REST・TypeORM)

完成イメージ・仕様・技術選定

【バックエンド】プロジェクト作成とセットアップ

【バックエンド】DB設定とTypeORM設定

【バックエンド】モデルの定義とDTOの定義

【バックエンド】DTOのバリデーション

【バックエンド】TODOの処理の記述

【バックエンド】ルーティングの記述

【バックエンド】依存関係の管理(Module)

【バックエンド】動作確認

【バックエンド】接続情報を環境変数にする

【フロントエンド】プロジェクト作成とセットアップ

【フロントエンド】Next.jsの全体設定

【フロントエンド】見た目を整える

【フロントエンド】モデルの定義

【フロントエンド】カスタムフックの記述(TODOの処理を呼ぶ)

【フロントエンド】カスタムフックの呼び出し

【フロントエンド】動作確認

まとめ(全コード及びバージョンなど)

終わりに

読者コミュニティ｜簡易TODOウェブアプリの開発-Next.js×NestJS(REST・TypeORM)

nextjs

typescript

nestjs

ENGINEER HIKARU