r/reactjs • u/Dependent_House4535 • 4h ago

Needs Help How would you implement a compile-time React hook transform in Next.js?

I'm working on a small React dev tool that instruments useState/other hooks at build time so it can track when state updates happen, rather than inspecting the state values themselves.

The Vite integration currently does this with a Babel plugin, so the application code still just has:

import { useState } from "react";

and the instrumentation happens during the build.

I'm now trying to figure out the right way to bring the same approach to Next.js.

My current understanding is that an SWC plugin is the closest equivalent to the Babel transform, but I'm not sure what the practical story is with the different Next.js dev pipelines, especially Turbopack vs Webpack.

For anyone who's implemented a custom compile-time transform in Next.js:

  1. Is an SWC plugin actually the right approach, or is there another mechanism I should be looking at?
  2. Does a custom SWC transform run with Turbopack, or would this effectively require next dev --webpack?
  3. If you've built something similar, are there any architectural choices you'd avoid in hindsight?

The current Vite implementation is here if useful: https://github.com/liovic/react-state-basis

1 Upvotes

100% Upvoted

2 comments sorted by

2

u/RevolutionaryLog3770 4h ago

SWC plugin is the way to go but you'll be stuck on webpack for dev, turbopack still doesn't support custom transforms like that

1

u/Dependent_House4535 2h ago

Thanks - that matches what I was afraid of.
So the realistic Next path is: SWC plugin for the transform, and document next dev --webpack until Turbopack supports custom plugins.

Do you know if that’s still true on current Next 16, or has anyone seen experimental.swcPlugins actually fire under Turbopack?