> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/aidenybai/react-grab/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js Integration
> Install React Grab in your Next.js project with App Router or Pages Router
React Grab integrates seamlessly with Next.js, supporting both the App Router and Pages Router.
## Automatic Installation
The easiest way to install React Grab in your Next.js project:
Navigate to your project root (where `next.config.ts` is located) and run:
```bash theme={null}
npx -y grab@latest init
```
The CLI will automatically detect your Next.js setup and router type.
Start your development server:
```bash theme={null}
npm run dev
```
Hover over any UI element and press **⌘C** (Mac) or **Ctrl+C** (Windows/Linux) to copy its context.
## Manual Installation
If you prefer to set up React Grab manually or the automatic installation doesn't work for your setup:
```jsx App Router (app/layout.tsx) theme={null}
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
)}
{children}
);
}
```
```jsx Pages Router (pages/_document.tsx) theme={null}
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
{process.env.NODE_ENV === "development" && (
)}
);
}
```
Make sure to wrap the Script component in a `process.env.NODE_ENV === "development"` check to ensure React Grab only loads in development mode.
## Router Detection
The CLI automatically detects your Next.js router type:
* **App Router**: Looks for `app/layout.tsx` or `app/layout.js`
* **Pages Router**: Looks for `pages/_document.tsx` or `pages/_document.js`
If you have a custom setup, use the [manual installation guide](/guides/manual-installation).
## Verification
After installation, verify React Grab is working:
```bash theme={null}
npm run dev
```
Navigate to any page in your Next.js application.
Hover over any UI element and press:
* **⌘C** (Cmd+C) on Mac
* **Ctrl+C** on Windows/Linux
You should see the element's context copied to your clipboard, including:
* File name and line number
* React component name
* HTML source code
## Common Issues
Ensure you're adding the Script component inside the `` tag, not in the ``. The `strategy="beforeInteractive"` ensures it loads before your app hydrates.
Make sure you're importing Script from `next/script`, not `next/document`. The Script component in Pages Router should still be imported from `next/script`.
React Grab is designed for development only. The `process.env.NODE_ENV === "development"` check prevents it from loading in production builds.
## Next Steps
Set up React Grab with Cursor, Claude, or other AI coding agents
Customize activation keys, context limits, and more
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.