Are there plans to support Next 13 Server-Side Components

[IObert]

As of now, server-rendered components are not supported.

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

There seems to be a fix by using createServerContext

Here's a minimal sample that will throw the error:

import { Heading } from "@twilio-paste/core/heading";
import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/core/breadcrumb";
import { Theme } from "@twilio-paste/core/theme";


export default function Home() {
    return (
        <Theme.Provider theme="default">
            <Heading as="h1" variant="heading10">
                Welcome to the the Paste Next.JS App!
            </Heading>
            <Breadcrumb>
                <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
                <BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
            </Breadcrumb>
        </Theme.Provider>
    )
}

[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:

• Unable to use Box paste component in my environment (updated: 06/28/2022, similarity score: 83%)
• ref error with Select component (updated: 04/17/2023, similarity score: 83%)
• Paste with react-hook-form (updated: 02/23/2023, similarity score: 83%)

[dosubot[bot]]

🤖

Hello @IObert! 👋

I'm Dosu, a friendly bot here to assist you in the meantime while we wait for a human maintainer. I'm here to help you solve bugs, answer your questions, and guide you in becoming a contributor. Looking forward to working with you!

Based on the current information available in the Paste repository, the Paste design system (@twilio-paste/[email protected]) does support Next.js 13. However, the issue you're encountering seems to be related to the use of server-side components in Next.js 13, which is a relatively new feature.

The error message you're seeing suggests that the createContext function from React is being used in a server-side component, which is not currently supported by Next.js. Instead, Next.js recommends using the createServerContext function for server-side components.

Unfortunately, the Paste design system does not currently use createServerContext in its Theme.Provider component, which is likely causing the error you're seeing. This is something that would need to be addressed in a future update to the Paste design system.

In the meantime, you might be able to work around this issue by ensuring that the Theme.Provider component and any other components that use createContext are only rendered on the client side. This could potentially be achieved using dynamic imports with the { ssr: false } option, or by using the useEffect hook to delay rendering until after the component has been mounted on the client side.

Here's an example of how you might modify your Home component to ensure that the Theme.Provider component is only rendered on the client side:

import { useState, useEffect } from 'react';
import { Heading } from "@twilio-paste/core/heading";
import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/core/breadcrumb";
import { Theme } from "@twilio-paste/core/theme";

export default function Home() {
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
    }, []);

    if (!isClient) {
        return null;
    }

    return (
        <Theme.Provider theme="default">
            <Heading as="h1" variant="heading10">
                Welcome to the the Paste Next.JS App!
            </Heading>
            <Breadcrumb>
                <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
                <BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
            </Breadcrumb>
        </Theme.Provider>
    );
}

This code uses the useEffect hook to set isClient to true after the component has been mounted on the client side. Before that, it returns null to avoid rendering any server-side components.

Please note that this is just a workaround and may not be suitable for all use cases. It would be best if the Paste design system could be updated to support server-side components in Next.js 13 directly. However, I'm unable to create pull requests or issues, so I would recommend reaching out to the maintainers of the Paste repository directly to discuss this issue further.

I hope this helps! If you have any further questions, please don't hesitate to ask.

-Dosu

Sources

• templates/paste-nextjs-template/pages/_app.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[SiTaggart]

Hi @IObert

We're somewhat at the mercy of Emotion CSS right now, and Material UI is in the same boat as us, FWIW.

There seems to be a couple threads;

1. Support for NextJS app directory, which has some server side rendering
2. Support for React Server Components

For the NextJS app directory support there is a workaround that apparently works, though I haven't tried it. This has been wrapped by MUI into a package for their consumers to use with NextJS. We could probably do the same, but if the Next supplied example works just fine, you can probably just use that as it's a one-off implementation for your app. Nothing needed from us.

For pure React server components the path is less clear. Seems like most CSS-in-JS libraries are waiting on a few things for this to be a reality.

We've discussed internally potentially switching to something like StyleX which would work for both, but it would mean dropping runtime style computation, which I believe is still something we'd need to support for some Twilio applications, specifically Flex.

If it's just app directory support in Next, try the example in the NextJS repo, and that should get you rolling. Let us know how you get on.