ブログを作る場合
プロジェクトを整理し、維持しやすい構成にすることが重要です。
Next.js 13 と TypeScript を使用してブログサイトを作成する際のディレクトリ構成例を以下に示します。この構成では、機能ごとにディレクトリを分けています。
my-blog/
├─ .next/
├─ components/
│ ├─ Layout.tsx
│ ├─ Header.tsx
│ ├─ Footer.tsx
│ └─ BlogPost.tsx
├─ lib/
│ └─ api.ts
├─ pages/
│ ├─ index.tsx
│ ├─ blog/
│ │ ├─ [slug].tsx
│ │ └─ index.tsx
│ └─ api/
│ └─ blog.ts
├─ public/
│ ├─ images/
│ └─ favicon.ico
├─ styles/
│ ├─ globals.css
│ └─ theme.ts
├─ types/
│ └─ blog.d.ts
├─ .gitignore
├─ next.config.js
├─ package.json
├─ tsconfig.json
└─ README.mdディレクトリの説明:
.next/: Next.js のビルド成果物が格納されるディレクトリcomponents/: 再利用可能な React コンポーネントが格納されるディレクトリlib/: API やユーティリティ関数を格納するディレクトリpages/: 各ページのコンポーネントが格納されるディレクトリpublic/: 静的ファイル（画像やファビコンなど）が格納されるディレクトリstyles/: CSS やテーマ設定が格納されるディレクトリtypes/: TypeScript の型定義ファイルが格納されるディレクトリ.gitignore: Git で無視するファイルやディレクトリを指定するファイルnext.config.js: Next.js の設定ファイルpackage.json: 依存関係やスクリプトが記述されたファイルtsconfig.json: TypeScript の設定ファイルREADME.md: プロジェクトの説明が記載されるファイル
このディレクトリ構成はあくまで一例です。プロジェクトの要件や開発チームの好みに合わせてカスタマイズすることができます。
ログイン機能を作る場合
以下はユーザーのログイン機能を作る場合の一例です。
my-project/
├── components/
│ ├── Comment/
│ │ ├── Comment.tsx
│ │ └── Comment.module.css
│ ├── Post/
│ │ ├── Post.tsx
│ │ └── Post.module.css
│ └── Layout/
│ ├── Layout.tsx
│ └── Layout.module.css
├── pages/
│ ├── api/
│ │ ├── posts.ts
│ │ └── comments.ts
│ ├── posts/
│ │ ├── [id].tsx
│ │ └── new.tsx
│ ├── profile/
│ │ ├── edit.tsx
│ │ └── [id].tsx
│ ├── dashboard/
│ ├── notifications/
│ ├── signin.tsx
│ ├── signup.tsx
│ └── index.tsx
├── public/
│ ├── images/
│ └── favicon.ico
├── styles/
│ └── global.css
├── prisma/
│ └── schema.prisma
├── .env.local
├── next.config.js
└── package.json
プロジェクトが完成したら、実際にインターネット上で公開する必要があります。Next.js アプリケーションは、多くのホスティングプロバイダーでデプロイできます。