⚡ Next Locator

Alt+Click any element in the browser to jump straight to its source file and line in VS Code — for Next.js and React.

A lightweight React DevTools alternative that bridges your browser and editor. Hold Alt and click any UI element to jump directly to its source file, exact line, and component. An essential developer productivity tool for instant source code navigation and component inspection.

Demo

✨ How It Works

Alt + Click any element in Chrome
         ↓
Chrome Extension reads its source location
         ↓
VS Code opens the exact file at the exact line

Example:

• You click a <Button /> on localhost:3000
• VS Code instantly opens components/ui/Button.tsx at line 12

🚀 Quick Start (2 steps)

Step 1 — Install the Chrome Extension

The official Chrome Extension is required to bridge your browser and VS Code.

1. Install Next Locator from the Chrome Web Store:
   👉 Install Next Locator Extension
2. Pin the ⚡ Next Locator icon to your Chrome toolbar for easy access.

Step 2 — Set up each Next.js project (10 seconds)

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

npx @next-locator/cli init

That's it. The CLI automatically:

• ✅ Detects your Next.js project
• ✅ Installs the Babel plugin as a dev dependency
• ✅ Wraps your next.config.js to automatically enable Next Locator in dev mode
• ✅ Keeps the ultra-fast SWC & Turbopack compilers enabled!

🎯 Usage

1. Start your Next.js dev server: npm run dev
2. Open your app in Chrome (localhost:3000)
3. Hold Alt — a blue highlight box appears over elements
4. Click any element
5. VS Code opens the exact source file and line ✨

Note: Works in Development mode only (npm run dev). The tool is automatically inactive in production builds.

📦 What Gets Installed

When you run npx @next-locator/cli init, only one dev dependency is added to your project:

{
  "devDependencies": {
    "@next-locator/babel-plugin": "^1.0.0"
  }
}

And your Next.js configuration file (next.config.js, next.config.mjs, or next.config.ts) is automatically wrapped to inject the plugin only during development:

const { withNextLocator } = require("@next-locator/babel-plugin/dist/config.js");

module.exports = withNextLocator(nextConfig);

Zero impact on production. devDependencies are never shipped to users. Your bundle size, performance, and production code are completely unaffected.

🔧 Compatibility

| Framework | Support | |-----------|---------| | Next.js (Pages Router) | ✅ Full support | | Next.js (App Router) | ✅ Full support | | React (CRA / Vite) | ⚠️ Partial (Fiber mode) |

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

🛠️ How It Works Internally

This tool has three parts:

1. Babel Plugin (@next-locator/babel-plugin)

At build time, stamps every JSX element with hidden data- attributes containing the source file path, line number, and component name. These attributes are invisible to users and exist only in dev mode.

// Your code:
<Button>Click me</Button>

// What the plugin generates (dev only):
<Button
  data-next-locator-file="/project/components/Button.tsx"
  data-next-locator-line="12"
  data-next-locator-component="Button"
>
  Click me
</Button>

2. Chrome Extension

When you Alt + Click, the extension reads the data-next-locator-file attribute and builds a native vscode:// URL, which Chrome passes directly to VS Code — no server, no ports, no background processes.

3. VS Code Protocol

VS Code has a built-in URL handler (vscode://file/path:line) that opens the exact file at the exact line. No VS Code extension required.

🙋 FAQ

Q: Does this affect my production build? No. The Babel plugin only injects attributes in development mode. Production builds are identical.

Q: Does withNextLocator affect my team or CI? No. The wrapper detects if you are running a production build (npm run build) and completely bypasses itself, ensuring zero impact on your team or CI pipeline.

Q: Do my teammates need to set this up? Each developer who wants the feature runs npx @next-locator/cli init once on their own machine. It takes 10 seconds.

Q: Will it break projects using Apollo Client? Apollo Client requires graphql as a peer dependency. If it's missing, run npm install graphql in your project first.

📄 License

MIT © Next Locator