- Container: アプリケーションのロジックに関心を持ち、APIや状態管理ライブラリから取得したデータをPresentational Componentに渡す
- Presentational: UIに関心を持ち、Propsで受け取ったデータをどのように表示するかのみを役割として持つ
- 2 つのコンポーネントを組み合わせることで、アプリケーションロジックの処理とビューを分離することが可能になる
- プレゼンテーションコンポーネントは、データを変更することなく表示するだけなので、再利用が容易になる
- ロジックのテストであればContainer Component、UIのテストであればPresentational Componentといった具合に、それぞれのComponentに対して何をテストすれば良いかが明確になる
- コンテナ・プレゼンテーションパターン｜フロントエンドのデザインパターン
- Container/Presentationalパターン再入門
- Angular/React両方を経験して得られた堅牢なアプリケーション設計 - DEV Community
https://github.com/chida09/graphql-apollo-server で設定したschemaを参照
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.