ag-grid-nextjs

name	ag-grid-nextjs
description	Next.js / React プロジェクトで AG Grid を導入・実装・移行・レビューするときに使う。App Router/Client Component、AgGridProvider、モジュール登録、Theming API、columnDefs/rowData、基本機能、custom/provided components、Enterprise ライセンス、SSRM、パフォーマンス、テスト方針を扱う。ag-grid, AG Grid, ag-grid-react, Next.js, React table, data grid, cellRenderer, cellEditor, filter, statusBar, toolPanel, overlay などがトリガー。

AG Grid for Next.js Skill

目的

Next.js（特に App Router）で AG Grid React を安全に導入・実装・修正する。ブラウザ API 依存、モジュール登録、テーマ、コンポーネント種別、Enterprise 機能、SSRM、React Hooks の参照安定性を見落とさない。

使うタイミング

• Next.js / React に ag-grid-react を追加する。
• AgGridReact、columnDefs、rowData、defaultColDef、rowSelection、pagination、cellRenderer、cellEditor、filter などを実装・修正する。
• AG Grid の custom components / provided components / Enterprise 機能を選定する。
• AG Grid が Next.js で表示されない、hydration/SSR エラー、テーマが当たらない、行選択がリセットされる、列状態がリセットされる問題を調査する。

最初に確認すること

1. package.json で ag-grid-react、ag-grid-community、ag-grid-enterprise、next、react のバージョンを確認する。
2. app/ と pages/ のどちらを使っているか確認する。App Router では AG Grid を含むファイルを Client Component にする。
3. 既存コードが AgGridProvider を使っているか、ModuleRegistry.registerModules(...) を使っているかを確認する。新規実装では原則 AgGridProvider を優先する。
4. v33 以降の Theming API を使うか、既存の legacy CSS theme を維持するかを確認する。新規実装では Theming API を優先する。
5. custom/provided component に触れる依頼では、必ず reference/component-catalog.md を読む。