From 9078697faa19624a52d981be2f63b082f61ec8ff Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Tue, 26 Nov 2024 12:50:06 +0530
Subject: [PATCH] fix: Add prereqs to Next integration docs

---
 .../core/integrations/nextjs-approuter.md     | 20 +++++++++++++++++++
 .../core/integrations/nextjs-pagesrouter.md   | 20 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/docs/data/toolpad/core/integrations/nextjs-approuter.md b/docs/data/toolpad/core/integrations/nextjs-approuter.md
index 6513e571f1d..b6ed63a226c 100644
--- a/docs/data/toolpad/core/integrations/nextjs-approuter.md
+++ b/docs/data/toolpad/core/integrations/nextjs-approuter.md
@@ -6,6 +6,26 @@ title: Next.js - Integration
 
 <p class="description">This guide walks you through adding Toolpad Core to an existing Next.js app.</p>
 
+## Prerequisites
+
+Ensure that you have `@mui/material` and `next` installed. You also need the following to make the integration work correctly:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @mui/material-nextjs @emotion/cache
+```
+
+```bash pnpm
+pnpm add @mui/material-nextjs @emotion/cache
+```
+
+```bash yarn
+yarn add install @mui/material-nextjs @emotion/cache
+```
+
+</codeblock>
+
 ## Wrap your application with `AppProvider`
 
 In your root layout file (for example, `app/layout.tsx`), wrap your application with the `AppProvider`:
diff --git a/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md b/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md
index 69f5a4a2086..c6e8171d805 100644
--- a/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md
+++ b/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md
@@ -6,6 +6,26 @@ title: Next.js - Integration
 
 <p class="description">This guide walks you through adding Toolpad Core to an existing Next.js app.</p>
 
+## Prerequisites
+
+Ensure that you have `@mui/material` and `next` installed. You also need the following to make the integration work correctly:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @mui/material-nextjs @emotion/cache
+```
+
+```bash pnpm
+pnpm add @mui/material-nextjs @emotion/cache
+```
+
+```bash yarn
+yarn add install @mui/material-nextjs @emotion/cache
+```
+
+</codeblock>
+
 ## Wrap your application with `AppProvider`
 
 In your root layout file (for example, `pages/_app.tsx`), wrap your application with the `AppProvider`: