芸工展 2021 本サイト
開発
環境構築
$ npm i
$ npm run dev
コンポーネント
- コンポーネント内でデータ取得をしていいのは ①, ② のみ。
- ページ内でしか使われないものは ② にベタ書きを許容(程々に)。共通化の必要が出たら ③ に切り出す。
- /components 下は基本的にネストせず、index.ts からエクスポート(Barrel)。ただし ⑥ はネストを許容。
① /pages
- ② コンポーネントでページのレイアウトを組む。データを流す。
② /components/pages
- ① をセクションごとでコンポーネントに切り出したもの。完全にページに依存。
- useMediaQuery を使ってアダプティブに ③ コンポーネントを出し分けする。
③ /components/ui
- レスポンシブスタイルは props によって制御される。(例; size: "md" | "lg")
④ /components/basics
- プリミティブなコンポーネントのみ。
- 必ず forwardRef と ComponentProps を渡せるようにする。
⑤ /components/vectors
- SVG アイコン等。
- 必要になったらバリアントを増やす。
⑥ /components/layouts
- PC/SP のレイアウト。ヘッダーフッター等の構成要素もここ。
デプロイ
サブディレクトリ「/sub」にエクスポート
$ echo NEXT_PUBLIC_BASE_PATH=/sub > .env
$ npm run build
メモ
- /cafe
- /workshop
- /web_contents
のURLを手動で切り替える必要がある