Any way to implement the inspector in Next.JS?

[voltuer]

I'm trying to use the devtools with NextJS, but haven't been able to figure it out.

The farthest I got was showing the inspector UI when using the key shortcut, but it shows the name of the parent folder rather than
the actual file, and clicking it obviously does nothing:

[thedv91]

The panel reads data-tsd-source, and that attribute comes from the injectSource transform in @tanstack/devtools-vite — which never runs under Next, since there's no Vite in the pipeline. So the inspector has nothing to go on, which is where the folder name and the dead click come from.

I ran into the same wall and ended up porting that transform so it runs under Turbopack and webpack: https://github.com/thedv91/swc-plugin-jsx-source-attrs

// next.config.ts
experimental: { swcPlugins: [["swc-plugin-jsx-source-attrs", {}]] }

{} is deliberate — the default attribute name is data-tsd-source, because that's the one the inspector hardcodes. That gets you <main data-tsd-source="src/app/page.tsx:7:5"> in the markup.

If you have the React Compiler on, use the loader instead of the plugin. The compiler rebuilds the JSX tree with no source spans before any SWC plugin runs, so what you get is the bare path with no line or column — and the inspector's own handler drops those, since it needs both numbers. It looks exactly like the plugin isn't working. The loader runs ahead of the pipeline instead, where the position survives as an ordinary string literal:

// next.config.ts
turbopack: {
  rules: { "*.tsx": { loaders: [{ loader: "swc-plugin-jsx-source-attrs/loader", options: {} }] } },
},

The other half is the endpoint. On click the panel fetches /__tsd/open-source?source=path:line:column, which the Vite plugin answers as dev-server middleware and Next has no equivalent for. The fetch is .catch(() => {}), so a missing endpoint is indistinguishable from a click that did nothing. Next's own dev overlay already does that job, so a redirect covers it — no route handler, nothing extra compiled into a production build:

// next.config.ts
async redirects() {
  if (process.env.NODE_ENV !== "development") return [];
  return [{
    source: "/__tsd/open-source",
    permanent: false,
    has: [{ type: "query", key: "source", value: "(?<file>.+):(?<line>\\d+):(?<column>\\d+)" }],
    destination: "/__nextjs_launch-editor?file=:file&line1=:line&column1=:column",
  }];
},

A redirect rather than a rewrite: __nextjs_launch-editor is served by dev middleware that runs ahead of the router, so a rewritten URL never reaches it and 404s.

Checked end to end on Next 16.3.1 with Turbopack — hold Shift+Alt+Ctrl, hover, click, and the file opens at the right line. One thing that cost me a while: the hotkey check is an equality, not a subset, so a fourth modifier resting under a finger cancels the whole thing with no visible effect at all.

Full setup, including the client component and the rest of the failure modes that look like a dead hotkey: https://github.com/thedv91/swc-plugin-jsx-source-attrs#tanstack-devtools