Skip to content

TypeScriptとReact/Next.jsでつくる実践Webアプリケーションの第5章から6章までのコード

Notifications You must be signed in to change notification settings

gihyo-book/ts-nextbook-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

89d5c6f · Apr 25, 2023

History

71 Commits
Aug 4, 2022
Oct 19, 2022
May 23, 2022
Apr 25, 2023
May 23, 2022
May 23, 2022
May 23, 2022
May 23, 2022
May 23, 2022
Jul 29, 2022
Mar 5, 2023
May 23, 2022
May 23, 2022
May 23, 2022
Jun 19, 2022
Oct 19, 2022
Oct 19, 2022
May 23, 2022

Repository files navigation

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

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション」のサンプルアプリ

サンプルアプリ

初版からのアップデート

環境

  • Node.js: 16.14.0
  • Next.js: 12.2.3
  • React: 18.2.0

インストール

npm install

環境変数の設定

.envを開く

API_BASE_URL=<バックエンドAPIへのベースURLの設定>
NEXT_PUBLIC_API_BASE_PATH=/api/proxy

開発サーバー起動

JSON Serverの設定と起動

こちらのリポジトリとは別のディレクトリで作業する

cd https://github.com/gihyo-book/ts-nextbook-json
cd ts-nextbook-json
npm ci
npm start

開発サーバーを起動し、http://localhost:3000/ にアクセス

npm run dev

Storybook起動

Storybookを起動し、http://localhost:6006/ にアクセス

npm run storybook

テスト実行

ユニットテスト実行

npm run test

ソースコードリンター・フォーマッター

ソースコードをリンターでチェック

npm run lint

ソースコードをフォーマッターで整形

npm run format

ディレクトリ構成

簡単にディレクトリ構成を以下に説明します。

├── .editorconfig
├── .env <-- 環境変数
├── .env.production <-- 本番用環境変数
├── .eslintrc.json <-- ESLint設定ファイル
├── README.md
├── jest.config.js <-- Jestの設定ファイル
├── jest.setup.js <-- テストファイルが実行される前に走る
├── next-env.d.ts
├── next.config.js <-- Next.js設定ファイル
├── package-lock.json
├── package.json
├── public
├── src
│   ├── components <-- Presentational Components
│   ├── containers <-- Container Compoments
│   ├── contexts <-- React Context
│   ├── pages <-- Next.jsのページ
│   ├── services <-- Web API Client
│   ├── themes <-- styled-componentsのテーマ
│   ├── types <-- 型定義
│   └── utils <-- 汎用関数
└── tsconfig.json

About

TypeScriptとReact/Next.jsでつくる実践Webアプリケーションの第5章から6章までのコード

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published