next.js × React × TypeScriptを用いた簡易コマースアプリケーション
Node.js: 16.14.0 Next.js: 12.2.3 React: 18.2.0
API_BASE_URL=http://localhost:8000
NEXT_PUBliC_API_BASE_PATH=/api/proxy
こちらを8000ポートで起動してください https://github.com/tochisuke221/ts-nextbook-json
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を起動し、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