.png)
Next.js-Projectディレクトリ構造
#Next.js
はじめに
本サイトでもある「Tech Blog」のディレクトリ構造をなんとなくで運用していたので
今回は自分でも確認しつつ簡単に説明できればと思います。
ディレクトリ構成
project_root/
├── components/
│ └── Header.tsx // Atomic Design準拠 UIコンポーネントを配置する。
├── libs/
│ └── client.ts // 使用しているライブラリ固有のコードで、初期化や設定のコードなど、自分はmicroCMSとの接続設定書いてます
├── pages/ // Nextjsでルーティングされるページコンポーネントを配置する。
│ ├── api/
│ │ └── hello.ts // WebApi等の外部APIのクライアントを配置する。*hello.tsは初期配置
│ ├── blog/
│ │ └── [id].tsx // Blogページにまつわるディレクトリ 記事詳細ページの処理など
│ ├── _app.tsx // 全ページで必要な処理 (ページ間共通レイアウト, 共通のstate)
│ └── index.tsx // indexページ
├── public/ // 静的ファイル(画像など)を配置する。
│ ├── favicon.ico
│ └── vercel.svg
├── styles/ // 全体のスタイルを配置する。
│ └── globals.css // 全ページに適用されるcssファイル
├── types/ // typescriptのカスタム型定義
│ ├── blog.ts
│ └── highlightbody.ts
├── .gitignore
├── .prettierrc.yml
├── README.md // リポジトリの説明書
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.jsonさいごに
あくまで、自身の「TechBlog」一例なのでプロジェクトに合わせて構築することが重要だと思われます。
また、ディレクトリの定義も自分の中で調べた知識による解釈になるのでご容赦いただけると幸いです。。。
いやぁでも、Nextjsは良いですね、使いやすいし、早いしで、とても良い！！！！