⚡ Next Locator

Alt/Ctrl+Click any React or Next.js element in your browser to jump straight to its source code in your favorite IDE — VS Code, Antigravity IDE, Cursor, WebStorm, and more.

Next Locator is a lightweight, ultra-fast developer productivity tool and React DevTools alternative. Inspect components on your page and navigate directly to the exact file, component, and line number in your code editor with a single click.

✨ Features

• 🎯 Click-to-Component Navigation: Click any element on your page to reveal its source file and exact line.
• ⚡ Multi-IDE & Editor Support: Open files in VS Code, Antigravity IDE, Cursor, VS Code Insiders, WebStorm, IntelliJ IDEA, or Sublime Text.
• ⌨️ Configurable Trigger Key: Choose between Alt + Click, Ctrl + Click, or Shift + Click to prevent hotkey conflicts with other browser extensions or React devtools.
• 🚀 Zero-Config Setup: One CLI command automatically configures your Next.js project.
• ⚡ Lightning Fast (SWC & Turbopack): Non-intrusive dev-only injection that keeps Turbopack and SWC compilers running at full speed.
• 🔒 Zero Production Overhead: Dev dependencies and source attributes are stripped in production builds.

✨ How It Works

Alt / Ctrl + Click any UI element in browser
                    ↓
Chrome Extension reads component source metadata
                    ↓
Opens your selected IDE (VS Code, Antigravity, Cursor, etc.) at the exact file & line

🚀 Quick Start (2 Steps)

Step 1 — Install the Chrome Extension

1. Install Next Locator from the Chrome Web Store:
   👉 Install Next Locator Extension
2. Open the extension popup to pick your favorite code editor (VS Code, Antigravity IDE, Cursor, etc.) and preferred trigger key.

Step 2 — Initialize Your Next.js Project (10 Seconds)

Run this once in the root of your Next.js project:

npx @next-locator/cli init

The CLI automatically:

• ✅ Detects your project configuration (next.config.js, next.config.mjs, or next.config.ts)
• ✅ Installs @next-locator/babel-plugin as a dev dependency
• ✅ Safely wraps your Next.js config in-place
• ✅ Preserves Turbopack & SWC compiler speed!

🎯 Usage

1. Run your dev server: npm run dev
2. Open your web app in Chrome (http://localhost:3000)
3. Hold your trigger key (Alt / Ctrl / Shift) — hover over any component to see the overlay
4. Click any element to jump directly to its source code in your configured editor! ✨

🛠️ Supported Editors

| Editor | Protocol Handler | Status | |--------|------------------|--------| | VS Code | vscode:// | ✅ Supported | | Antigravity IDE | antigravity-ide:// | ✅ Supported | | Cursor | cursor:// | ✅ Supported | | VS Code Insiders | vscode-insiders:// | ✅ Supported | | WebStorm | webstorm:// | ✅ Supported | | IntelliJ IDEA | idea:// | ✅ Supported | | Sublime Text | subl:// | ✅ Supported |

🔧 Compatibility

| Framework | Support | |-----------|---------| | Next.js 14 / 15 / 16 (App Router) | ✅ Full support | | Next.js 14 / 15 / 16 (Pages Router) | ✅ Full support | | React 18 / 19 | ✅ Full support | | TypeScript / JavaScript | ✅ Full support |

| Browser | Support | |---------|---------| | Google Chrome | ✅ | | Microsoft Edge | ✅ | | Brave | ✅ | | Arc | ✅ |

📄 License

MIT © Next Locator