Next.js Discord

Discord Forum

NEXT.js Warning

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Original message was deleted.

1 Reply

Sloth bear
To eliminate all the warnings, instead of having to make the same thing in the client component over and over again, I listened to the advice from the forum, tried to wrap the main layout with the client component

my code:
// /app/layout.tsx
import React from 'react';
import { Recursive } from 'next/font/google';

import ClientProvider from '@/components/ClientProvider';

import { Toaster } from 'sonner';

import './globals.css';

const recursive = Recursive({ subsets: ['latin'] });

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <html lang='en'>
            <body className={recursive.className}>
                <ClientProvider>
                    {children}

                    <Toaster
                        position='top-center'
                        richColors
                    />
                </ClientProvider>
            </body>
        </html>
    );
};

export default RootLayout;

// ClientProvider.tsx
'use client';

import React from 'react';

const ClientProvider = ({ children }: { children: React.ReactNode }) => {
    const [isClient, setIsClient] = React.useState(false);

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

    if (!isClient) return null;

    return children;
};

export default ClientProvider;