内容紹介

（概要）

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

本書は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