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.

Ran into the same wall and ended up porting that transform to an SWC plugin, 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", { "source-path-attr": "data-tsd-source" }]],
}

That gets you <main data-tsd-source="src/app/page.tsx:7:5"> in the markup.

Fair warning though: I've only checked that the attribute itself comes out right, I haven't wired the panel up against it. If the inspector wants the value in some other shape I'd want to know.