Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using `twind/shim` with Next.js SSR?

See original GitHub issue

I’d like to be able to use the default className="" syntax in my Next.js application, so I’m using twind/shim.

Looking at the twind/shim/server SSR example on the website, I’m not sure how to integrate this with Next.js? The shim function expects a htmlString as input, and I don’t know where in the Next.js render process to hook this in.

Is it possible?

Issue Analytics

State:
Created 3 years ago
Comments:11

Top GitHub Comments

3reactions

LonJonncommented, Mar 17, 2021

Unfortunately, even with this plugin, I get errors on my clientside.

Although both shim & non-shim versions function correctly, when using the shim version, I get a client-server prop mismatch saying Warning: Prop 'className' did not match. Server: "sm:hover:bg-blue-500 sm:hover:text-green-500" Client: "sm:hover:(bg-blue-500 text-green-500)"

Another thing I noticed is that whenever Next HMRs, I get a console.warn stating Error: [LATE_SETUP_CALL] {}.

Does anyone have any thoughts on this? Thanks!

PS. Really loving Twind so far! Perfect blend of normal tailwind with composable helpers to improve maintainability. And the documentation is great as well!

2reactions

surjithctlycommented, May 25, 2021

@sastan Currently the page loads normal class and then changes to hashed one tw-xyzabc I can literally see that changing in the devtools. Which means the changing happens on the client. Because of this, I have FOUC.

or am I doing it wrong?

Top Results From Across the Web

Basic Features: Pages

Next.js pages are React Components exported in a file in the pages directory. ... Also referred to as "SSR" or "Dynamic Rendering". If...

Using Non-SSR Friendly Components with Next.js

How to Disable Server-Side-Rendering in Next.js? 1. Use next/dynamic imports. Next.js claims to support ES2020 dynamic import() for JavaScript. It allows ...

twind/next examples

Learn how to use @twind/next by viewing and forking @twind/next example apps on CodeSandbox. ... nextjs-with-twind · nextjs-with-twind ... twind-shim-nextjs.

How to detect window size in Next.js SSR using react hook?

You can avoid calling your detection function in ssr by adding this code: // make sure your function is being called in client...

SSR vs SSG in Next.js – tutorial for CTOs and devs

Are Server-Side Rendering and Static Site Generation the answer? To find out, let's take a look at Next.js, one of the most popular...