Integrate Twin + Next.js + Emotion with App Router

[daryldixon1994]

Hello community, I just wanted to ask how to use Twin + Next.js + Emotion in a next js app bur when I am using the app router. The documentations available are destinated for the Pages Router. Please can any one help me

[ben-rogerson]

Hi there
I've just updated the next-emotion-typescript example to use the new app router.
The trick is to use the jsx pragma at the top of files using emotion, eg:

/** @jsxImportSource @emotion/react */

and remove the @babel/preset-react plugin that defines the pragma.

Ideally I'd like to avoid the pragma at the top of each file but that's the only solution I've found so far.

It's early days on this and I don't have instructions yet, but here's the changes to upgrade from the pages dir to the app dir.

Let me know if you encounter any issues.
Cheers

[u3u]

Thanks! The server component upgrade is too significant, which can greatly reduce the size of JS sent to the client to improve PageSpeed Insights performance score.

[u3u]

Hi, I found a swc-useclient plugin (by @coder-xiaotian), which should automatically add the "use client" directive at the top of files in a specified directory. It would be even better if it supports adding custom content at the top of files through options!

I have no research on Rust, and I don't really like its syntax, but it does look very concise. The plugin is also implemented with only a few lines of code. 👍

[daryldixon1994]

Hello and thank you for your answers, but first of all should I have to follow the instructions herehttps://github.com/ben-rogerson/twin.examples/tree/master/next-emotion and then try your sollution above ? or @ben-rogerson could you please show me the ordered steps to do it , so I can integrate twin macro in my next js (app dir) project note that I am using JavasScript not TypeScript, because I am feeling that things are getting complicated and I don't know what t do.

[daryldixon1994]

in this docs https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion, I have to import the GlobalStyles file in src/pages/_app.js like this:

import GlobalStyles from '../styles/GlobalStyles'

const App = ({ Component, pageProps }) => (
<>

<GlobalStyles />
<Component {...pageProps} />

</>
)

export default App

this is the case of pager dir, but in the case of app dir where should I put these line of code, in the app directory I have only two file page.js or layout.js and both of them are not working and showed me the following error :

`- error ./node_modules/cosmiconfig/dist/readFile.js:9:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/cosmiconfig/dist/Explorer.js
./node_modules/cosmiconfig/dist/index.js
./node_modules/babel-plugin-macros/dist/index.js
./node_modules/twin.macro/macro.js
./src/styles/GlobalStyles.js
./src/app/layout.js`

[coder-xiaotian]

@u3u Thanks for your affirmation! I have released a new version of use-client, now you can insert custom content at the top of files. You can have a try.🤝