フォルダ構成を決める

[dak2]

概要

Next.jsのフォルダ構成を考える

参考資料

https://nextjs.org/docs/app/building-your-application/routing/colocation

[dak2]

file名に関して

• すべて小文字
• 単語の区切りはハイフン

npm moduleと同じ形式
https://stackoverflow.com/a/60509221

[dak2]

• pagesディレクトリ配下がroutingとなる
  • pagesディレクトリ配下に機能ごとのディレクトリを用意
  • ex. dashboard, quizzes
• componentsは汎用コンポーネントをまとめる
• libは共通化した汎用コードを置く
• providersはステート管理用のプロバイダーを置く

 tree -I node_modules   
.
├── Dockerfile
├── README.md
├── components
│   └── elements
│       └── button
│           ├── LoginButton.tsx
│           └── LogoutButton.tsx
├── docker-compose.yml
├── lib
│   └── auth.ts
├── next-env.d.ts
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.ts
│   ├── dashboard
│   │   └── index.tsx
│   ├── index.tsx
│   └── quizzes
│       └── index.tsx
├── providers
│   ├── GoogleLoginProvider.tsx
│   └── UserProvider.tsx
├── public
│   ├── favicon.ico
│   ├── github.svg
│   └── images
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

12 directories, 21 files

参考資料

• https://zenn.dev/sakito/articles/af87061a5016e6 https://github.com/alan2207/bulletproof-react/tree/master
• https://nextjs.org/docs/app/building-your-application/routing/colocation
• https://stackoverflow.com/questions/71901961/nextjs-nested-routing-subpages-with-context-and-layout