How to use notistack in Nextjs 13+

Question

I am having an issue using notistack in nextjs 13+.

I'd usually wrap the {children} with the SnackbarProvider, like so:

<SnackbarProvider>
{children}
</SnackbarProvider>

inside the _app file, but with nextjs 13+ it is now the layout file. How do i get this done, without turning my layout file into a 'use client'. I have tried using a customerprovider, but I am getting the same

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

Answer 1

Add the 'use client' directive at the top of the SnackbarProvider component file because you used the createContext hook which works on the client side.