Built-in support option for Next.js app router and RSCs ("use client")

[stern-shawn]

Late last year I tested out a migration of the Twilio Docs from using the pages router to trying out the newer app router.

One hurdle that we had to overcome was the rift between server and client components in the new paradigm, which was exacerbated a little bit by Paste's components. Even importing a stateless component like Paragraph would result in some errors from Next.js, which I believe is caused by the Emotion dependency and it not being RSC-ready yet. (It's 2025 and it's still the lone library on this list in the Next.js docs 😭)

We found a workaround that let us get error-free server rendering, which involved either individually importing Paste components and then rexporting them from a file with the new "use client" directive at the top, or for convenience, doing so from a larger single file that handles the import/export. Another alternative could also be using a post-install hook to manually add that "use client" string to Paste in node_modules, but I didn't put much energy into trying that solution as it felt hacky.

Ideally we wouldn't need workarounds like this, but I'm not sure if Next.js-specific support is part of Paste's plans (although RSC in some capacity will be standard across React frameworks someday? ™️ ), so I hesitate to make a request such as "could Paste add 'use client' to all of their exports?" Even if care was taken to only add "use client" to stateful Paste components, I think Emotion's lack of clear RSC support is still going to cause issues with our adoption. We on the docs team could also attempt to make a PR that just adds that directive to all exports as a short term 'solution', but I'd rather ask now than open a PR like that and ruffle some feathers unnecessarily.

Hoping this can at least start the conversation on possible next steps, for either/both team(s) 😄

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Avoiding dark mode flicker with CSS variables (updated: 03/11/2025, similarity score: 85%)
• Using Paste v18 with React 17 (updated: 01/17/2024, similarity score: 85%)
• Are there plans to support Next 13 Server-Side Components (updated: 12/29/2023, similarity score: 85%)

[serifluous]

Hey @stern-shawn ! Our engineering team started looking into this today.

In the meantime, @PixeledCode suggested:

you can export paste components like this from you paste.ts file, instead of individually exporting them:

"use client";

export * from "@twilio-paste/core";

There shouldn't be a need to use use client directive for Icons and types, but if they still, you can keep them in this file

[stern-shawn]

Thanks a ton! I'll pass that to our team and see if that helps clean up our intermediary file 🚀

[stern-shawn]

Actually, one question about that! Based on this doc we make sure to be very granular about our imports to avoid potential bundle size / tree shaking issues. Would using a wildcard export like that then be problematic?

There's this bit in our own internal readme, and I'd like to make sure which approach is correct before trying to give them more guidance:

It is important to note that, when adding a component to the main.ts file, to avoid issues with the tree shaking, you need to be specific with the route you want to export.
For example, if you want to export the Alert component you would do something like:

export { Alert } from '@twilio-paste/core/alert';

and NOT:

export * from '@twilio-paste/core';

This is because of how Twilio Paste is structured, and the way the components are exported, which can lead to issues with the tree shaking and the final bundle size.

Thanks!

[PixeledCode]

@stern-shawn you are right, we suggest the export { Alert } from '@twilio-paste/core/alert'; way of importing components as it supports tree shaking.
Considering use client we are working on adding them to each component and icon. Thank you for pointing this out

[stern-shawn]

Just pulled in the latest release and it appears to be working with our docs sub-app that's on the Next.js app router. Thanks so much for the help and quick turnaround on this, saves us a ton of tedious import/export code 🎉

[krisantrobus]

Hi @stern-shawn I was planning on following up with you today after we fully tested the released packages, one step ahead! So glad to hear it is working your end. Thank for confirming with us 🥳

On a side note I'm going to open this but keep it as answered. Our team try not to close out discussions to make them more discoverable but I appreciate you being proactive.