Support for NextJS 13 and server components

[chris-hinds]

Will Material Tailwind get full support for nextJS 13 and Reacts server components? To utilise server components and MTW we would need to make every component as a client component.

[sajadevo]

Hey @chris-hinds,

For sure we'll make it available but it won't happen soon because first we need to make the library as much stable as we can.

Cheers, Sajad

[jaredatron]

@sajadevo Is there any path to removing the use of createContext? If we can manage that it should be easy to get this working in next13's appDir

[sajadevo]

@deadlyicon createContext is the most important part of components in @material-tailwind/react because it features the theme, styles and complex functionalities for components like <Select /> and so on. But I'll try to find a better way for that and we need to wait at least the appDir become stable since it's on beta currently.

Cheers, Sajad

[sajadevo]

@chris-hinds and @jaredatron since the library is using the context api of react here is the solution for using it with Next.js 13 appDir:

1. On the app/layout.tsx put the following code:

   
   "use client";
   import "./globals.css";
   import { ThemeProvider } from "@material-tailwind/react";

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); }

2. Then on the pages that you want to have the components from @material-tailwind/react use the `'use client'` at the top of the file.

I'll try to make the components do this by default but for now you can go with this solution.

Cheers,
Sajad

[sebkasanzew]

@sajadevo Do your changes also fix this error?

Error text:

Warning: ThemeProvider: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@material-tailwind/react/context/theme.js:1:2369)

Or should I open a new issue for this?

[sajadevo]

@sajadevo Do your changes also fix this error?

Error text:

Warning: ThemeProvider: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@material-tailwind/react/context/theme.js:1:2369)

Or should I open a new issue for this?

Already fixed @sebkasanzew 🙌🏻

[sebkasanzew]

Hi, I want to ask about the time frame, when a version with this fix will be released, because I want to start to work on a prototype with Next.js 13 appDir tomorrow.

Or is there already a beta release, or something, which I am missing? I also don't see a WIP-branch. Can I help with the development?

[sajadevo]

Hey @jaredatron @chris-hinds @sebkasanzew

I've added a complete guide about this issue on the documentation since this is a UI library and uses lots of interactivities we can get rid to the React Context API but the way I've mentioned on the documentation will give you a smooth work flow.

https://www.material-tailwind.com/docs/react/guide/next#with-server-components

Cheers, Sajad

[olee]

I tried setting this up with a new project just now and cannot get it to work. Where should I add the ThemeProvider to the project because I have no pages/_app.tsx? Also, I'm getting this error: PropclassNamedid not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"

I think the section for nextjs 13 should be extended a bit more to clarify these details 👍

[chris-hinds]

I tried setting this up with a new project just now and cannot get it to work. Where should I add the ThemeProvider to the project because I have no pages/_app.tsx? Also, I'm getting this error: PropclassNamedid not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"

I think the section for nextjs 13 should be extended a bit more to clarify these details 👍

The Theme Provider would now sit in your top level Layout file.

[tae100k]

With the exact same code you provided : https://github.com/creativetimofficial/material-tailwind/issues/258#issuecomment-1425192149

I'm getting a type error

[fhfournier]

I can't use the "use client" on the RootLayout. So this is the only way I can use your library :\

If I follow your doc with next14 this is what I've got

import { ThemeProvider } from "@material-tailwind/react";

import "@/app/globals.css"

export default function RootLayout({ children }) {
  return (
    <html>
    <body>
      <ThemeProvider>
        {children}
      </ThemeProvider>
    </body>
    </html>
  )
}