
A quick look at how LocatorJS helps you navigate large React and Next.js codebases by connecting UI elements to their source components.
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.
I found a Google Chrome extension called LocatorJS.
What it does is simple and very useful:
Alt and click (or right-click).No guessing. No searching. No scrolling through folders.
LocatorJS works great with React by default.
But it does not work automatically with all frameworks.
For example:
The good news: Next.js is supported, but you must add some configuration, as shown in the docs.
If you’re using Next.js 15+, you need to configure Turbopack.
// Locator configuration for Turbopack (Next.js 15+)
turbopack: {
rules: {
"**/*.{tsx,jsx}": {
loaders: [{
loader: "@locator/webpack-loader",
options: { env: "development" }
}]
}
}
}
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.
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.
After setup:
It feels like the UI and the code are connected.
If you work with large frontend projects,
This tool saves real time.
Once you try it, it’s hard to go back.