How LocatorJS Fixed Component Hell in My Next.js Project

Within the last few days, I encountered an annoying situation.
I allowed my project to become a big one. The components became very complicated.

When there was a bug, the toughest thing was not solving the problem itself, but rather that it had gotten to that point
It was identifying the component to which this button or feature belonged.

This alone was causing me a great deal of delay.

The tool that fixed it

I found a Google Chrome extension called LocatorJS.

What it does is simple and very useful:

• Run your app locally.
• Hover over any element on the page.
• Press Alt and click (or right-click).
• It opens the exact component file in your editor.

No guessing. No searching. No scrolling through folders.

The next problem

LocatorJS works great with React by default.
But it does not work automatically with all frameworks.

For example:

• React: works out of the box
• Next.js: needs extra setup

The good news: Next.js is supported, but you must add some configuration, as shown in the docs.

Using LocatorJS with Next.js 15+ (Turbopack)

If you’re using Next.js 15+, you need to configure Turbopack.

Turbopack configuration

// Locator configuration for Turbopack (Next.js 15+)
turbopack: {
  rules: {
    "**/*.{tsx,jsx}": {
      loaders: [{
        loader: "@locator/webpack-loader",
        options: { env: "development" }
      }]
    }
  }
}

Enable Locator UI in the layout

Inside your main layout.tsx (or root layout):

// Initialize Locator UI in development mode
useEffect(() => {
  if (process.env.NODE_ENV === 'development') {
    setupLocatorUI();
  }
}, []);

This should only run in development mode.

Required packages

Install these packages:

"@locator/babel-jsx": "^0.5.1",
"@locator/runtime": "^0.5.1",
"@locator/webpack-loader": "^0.5.1"

Use Yarn or npm — whatever your project uses.

The result

After setup:

• Click any element in the UI
• LocatorJS opens the correct file
• You land directly in the right component

It feels like the UI and the code are connected.

Links

• Chrome extension:
  https://www.locatorjs.com
• Installation & docs (React + Next.js 15+):
  https://www.locatorjs.com/install/react-data-id?install-tool=Yarn&stack=Next.js+15%2B

If you work with large frontend projects,
This tool saves real time.

Once you try it, it’s hard to go back.