Container/Presentationalパターン概要

• Container: アプリケーションのロジックに関心を持ち、APIや状態管理ライブラリから取得したデータをPresentational Componentに渡す
• Presentational: UIに関心を持ち、Propsで受け取ったデータをどのように表示するかのみを役割として持つ
• 2 つのコンポーネントを組み合わせることで、アプリケーションロジックの処理とビューを分離することが可能になる

利点

• プレゼンテーションコンポーネントは、データを変更することなく表示するだけなので、再利用が容易になる
• ロジックのテストであればContainer Component、UIのテストであればPresentational Componentといった具合に、それぞれのComponentに対して何をテストすれば良いかが明確になる

参考

• コンテナ・プレゼンテーションパターン｜フロントエンドのデザインパターン
• Container/Presentationalパターン再入門
• Angular/React両方を経験して得られた堅牢なアプリケーション設計 - DEV Community

GraphQL

https://github.com/chida09/graphql-apollo-server で設定したschemaを参照

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open 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.

Learn More

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!

Deploy on Vercel

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.