Next.js Discord

Discord Forum

Why i cant use metadata inside layout.js (error about client component)

Answered
Somali posted this in #help-forum
Open in Discord
SomaliOP
Look at my layout.js file, i dont have any client component here, i also try to remove all components and leave only {children} anyway i have error
why?


import { Montserrat } from 'next/font/google';
import localFont from 'next/font/local';

import clsx from 'clsx';
import resolveConfig from 'tailwindcss/resolveConfig';

import { getGlobals } from '@/api/getGlobals';
import { Alert } from '@/components/layout/Alert/Alert';
import { Footer } from '@/components/layout/Footer/Footer';
import { Header } from '@/components/layout/Header/Header';
import { Form } from '@/components/ui/Form';
import { Modal } from '@/components/ui/Modal';

import tailwindConfig from '../../tailwind.config';

import './globals.css';

export const screens = resolveConfig(tailwindConfig).theme.screens;

const montserratFont = Montserrat({
    subsets: ['cyrillic', 'latin'],
    variable: '--font-text',
});

const headingNowFont = localFont({
    src: [
        {
            path: './fonts/Heading-Now-83-Book.woff2',
            weight: '300',
            style: 'normal',
        },
        {
            path: './fonts/Heading-Now-84-Regular.woff2',
            weight: '400',
            style: 'normal',
        },
    ],
    variable: '--font-display',
});
export const metadata = {
    title: 'k',
};

export default async function RootLayout({ children }) {
    const data = await getGlobals();
    console.log('Server only 2');
    return (
        <html lang="ru">
            <body
                className={clsx(
                    montserratFont.variable,
                    headingNowFont.variable,
                    'bg-gray-950 font-text',
                )}
            >
                <Modal form={data} />
                <Alert />
                <Header />
                <main className="main">{children}</main>
                <Footer />
            </body>
        </html>
    );
}
Answered by Barbary Lion
When you export screens from tailwindConfig like this:

Copy code
export const screens = resolveConfig(tailwindConfig).theme.screens;

And then you import it like this within your RootLayout component:

Copy code
import { screens } from '@/app/layout';

This can potentially make the RootLayout component a client-side component. This is because when you import screens like this, the module containing screens gets executed on the client side when the component is imported, and this can affect the server/client rendering behavior of the component.

Can make separate module for tailwind config and use that.
View full answer

9 Replies

SomaliOP
it complains about the CaseGridInner compnet, but this component is located in the children layout, is it really supposed to work like that?
Moreover, I also have other client components, is the problem with embla carousel?
SomaliOP
okay, i found why i getting error

i export const with tailwindconfig screens

export const screens = resolveConfig(tailwindConfig).theme.screens;

when i import it inside any client component (includes children)

this makes layout(or not?) to be client component

import { screens } from '@/app/layout';

event im not use it. watch screenshot
@aardani can you explain it please?
if I put this logic with tw-config import in another file and import from them then everything works fine
so 'resolveConfig' make components client?
but if i console.log layout with 'Server only' i get console log only in ide terminal
SomaliOP
okay, sorry
@Somali okay, i found why i getting error i export const with tailwindconfig screens export const screens = resolveConfig(tailwindConfig).theme.screens; when i import it inside any client component (includes children) this makes layout(or not?) to be client component import { screens } from '@/app/layout'; event im not use it. watch screenshot
Barbary Lion
When you export screens from tailwindConfig like this:

Copy code
export const screens = resolveConfig(tailwindConfig).theme.screens;

And then you import it like this within your RootLayout component:

Copy code
import { screens } from '@/app/layout';

This can potentially make the RootLayout component a client-side component. This is because when you import screens like this, the module containing screens gets executed on the client side when the component is imported, and this can affect the server/client rendering behavior of the component.

Can make separate module for tailwind config and use that.
Answer