TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

新しいフロントエンドの入門書決定版！

本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。

WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。高速さに裏付けされた高いUXと、開発しやすさを両立しているのが特徴です。

本書では、Next.jsの開発をより快適・堅牢にするTypeScriptで開発を進めます。Next.jsによるアプリケーション開発の基礎、最新のフロントエンドやWebアプリケーションの開発方法が学べます。

（こんな方におすすめ）

・モダンなWebフロントエンドに興味のある方

・React/Next.jsを初めて使う方、本番に導入したい方

・React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方

・TypeScriptを中心に据えたWebフロントエンド開発に興味のある方

・Atomic DesignやStorybookなど、コンポーネント中心の開発に興味のある方

（目次）

1 Next.jsとTypeScriptによるモダン開発

1.1 Next.jsとTypeScript

1.2 フロントエンド開発の変遷

1.3 モダンフロントエンド開発の設計思想

2 TypeScriptの基礎

2.1 TypeScriptの基礎知識

2.2 型の定義

2.3 基本的な型の機能

2.4 実際の開発で重要な型

2.5 TypeScriptのテクニック

2.6 TypeScriptの開発時設定

3 React/Next.jsの基礎

3.1 React入門

3.2 Reactにおけるコンポーネント

3.3 Reactにおける型

3.4 Context（コンテキスト）

3.5 React Hooks（フック）

3.6 Next.js入門

3.7 Next.jsのレンダリング手法

3.8 ページとレンダリング手法

3.9 Next.jsの機能

4 コンポーネント開発

4.1 Atomic Designによるコンポーネント設計

4.2 styled-componentsによるスタイル実装

4.3 Storybookを使ったコンポーネント管理

4.4 コンポーネントのユニットテスト

5 アプリケーション開発1〜設計・環境設定〜

5.1 本章で開発するアプリケーション

5.2 開発環境構築

6 アプリケーション開発2〜実装〜

6.1 アプリケーションアーキテクチャと全体の実装の流れ

6.2 APIクライアントの実装

6.3 コンポーネント実装の準備

6.4 Atomic Designによるコンポーネント設計の実施

6.5 Atomsの実装

6.6 Moleculesの実装

6.7 Organismsの実装

6.8 Templatesの実装

6.9 ページの設計と実装

6.10 コンポーネントのユニットテストの実装

7 アプリケーション開発3〜リリースと改善〜

7.1 デプロイとアプリケーション全体のシステムアーキテクチャ

7.2 Heroku

7.3 Vercel

7.4 ロギング

7.5 SEO

7.6 アクセシビリティ

7.7 セキュリティ

Appendix Next.jsのさらなる活用

A.1 決済ツールStripe

A.2 StoryShots―UIスナップショットテスト

A.3 AWS AmplifyへのNext.jsアプリケーションのデプロイ

A.4 国際化ツールi18n