Twin.marco — configure in nextjs 12 without using .babelrc

The previous story I introduced how to configue twin.marco in nextjs 12 using .babelrc . However, our team would like to stick with SWC over babel as the compiler, so I need to find another solution to configure twin.macro without using .babelrc

When we add .babelrc and run npm run dev , we can see this info “Disabled SWC”

2 resources on how to do it properly without using.babelrc (without disabling SWC compiler)

Emotion

How to config Nextjs for Babel Plugin Macros like twin.macro without d

Styled component

twin.examples/next-styled-components at master · ben-rogerson/twin.examples

Highlight some difference in plugins

Emotion

Styled component

Also we can setup this in different way

babel-plugin-macros.config.js or package.json

or in next.config.js

Last note

since all components , pages , styles folder under src , so I change it to this in withTwin.js

Reference

Support SWC · Discussion #516 · ben-rogerson/twin.macro