- Next.js (Using Pages Router / SSG & CSR)
- CSS Modules
- TypeScript
- microCMS
src/pages/preview配下はプレビュー用ページでアクセス制限をかけます。またこのページは microCMS の下書きの変更をリアルタイムに反映したいため、CSR でレンダリングさせます。
Node.js >=18.0.0
microCMS のセットアップを行います。
- APIのエンドポイント名を「blog」として指定して、リスト型のデータを作成し、下記のデータをインポートしてください。
- APIのエンドポイント名を「about」として指定して、オブジェクト型のデータを作成し、下記のデータをインポートしてください。
.env.sample に下記の値を登録してください。NEXT_PUBLICの接頭辞がつく環境変数は CSR のための変数です。
- SERVICE_DOMAIN
- API_KEY
- NEXT_PUBLIC_SERVICE_DOMAIN
- NEXT_PUBLIC_API_KEY
- NEXT_PUBLIC_SITE_URL
.env.sample を複製して .env を作成してください。
npm cinpm run devhttp://localhost:3000/ で確認できれば成功です。
- コンポーネントは
src/components/直下に全てフラットに置きます。 - ファイル名はなるべく属性を先頭に持ってきて、一覧で見たときに探しやすい状態を維持するようにしてください。（ex.「BaseHoge」「PageHoge」「CardHoge」「ButtonHoge」etc...）
pagesディレクトリはデータの取得のみにして、src/components/PageHogeに受け渡します。
CSS Modules を使用してスタイリングを行います。
- CSS Modules の特性上、モディファイアをクラス名として扱うのが面倒なため、data 属性を利用することを推奨します。(ex. data-color="hoge" etc...)
- コンポーネント名とCSS Modulesのファイル名を揃えてください。
- ローカルの画像はnext-export-optimize-imagesを使用させていただき SSG でも
next/imageが使用できるようにします。
import Image from "next/image";
<Image src="/images/hoge.jpg" alt="hoge" width={1280} height={800} className=""/>- microCMS にホスティングされている画像は画像 API 機能を使用して最適化を行います。
<img src="https://images.microcms-assets.io/assets/xxxxx/xxxxx/hoge.jpg?fm=webp&q=80" alt="hoge" width={1280} height={800} decoding="async"/>- 外部サイトを開く場合は
rel="noopener noreferrer"をつけて基本的には参照元リンク情報を渡さないでください。
<a href="https://liginc.co.jp/" target="_blank" rel="noopener noreferrer">Lint はhuskyを使用してプリコミット時に実行します。以下の vscode プラグインをインストールすると vscode 保存時にも Lint が実行されます。