Next.js Discord

Discord Forum

Unable to use useEffect and metaData api together on the root layout

Answered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
'use client'
import { rudderInitialize } from './tracker'
import '@/styles/tailwind.css'
import { type Metadata } from 'next'
import { useEffect } from 'react'

useEffect(()=>{
  rudderInitialize()
}, [])

export const metadata: Metadata = {
  title: {
    template: 'template',
    default: 'default',
  },
  description: `whatever disc`,
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className='h-full scroll-smooth bg-white antialiased'
    >
      <body className="flex h-full flex-col">{children}</body>
    </html>
  )
}

I have the above component and I want to initialize the rudderstack tracker on in the useEffect so that it starts as the component renders.
So I had to use 'use client' . But I am getting the following error 
The Next.js 'metadata' API is not allowed in a client component.

what is the most elegant way to make this work ? Maybe separating concerns ?
Answered by joulev
No don’t replace those with title and meta tags unless you must.

Instead make a layout.client.tsx (or any name of your choice) as a client component, use the useEffect there, then import it to the layout.tsx file which is a server component.
View full answer

14 Replies

same thing applies for layout.tsx
HimalayanOP
@joulev so I was replacing those with <title> and <meta> tags
but I am not sure what to do with the 'template' and 'template' parts
I don't think the tags can support template string %s
@Himalayan <@484037068239142956> so I was replacing those with <title> and <meta> tags but I am not sure what to do with the 'template' and 'template' parts I don't think the tags can support template string %s
joulev
No don’t replace those with title and meta tags unless you must.

Instead make a layout.client.tsx (or any name of your choice) as a client component, use the useEffect there, then import it to the layout.tsx file which is a server component.
Answer
HimalayanOP
the useEffect is the only client part here
the whole file is only going to be like this
export default function ClientLayout() {
  useEffect(() => {
    rudderInitialize()
  }, [])
  return <></>
}

I thought that would be an overkill
HimalayanOP
that's true @Anay-208
so are you saying it's not an overkill ?

I'm saying creating a separte file for a single useEffect call would be an overkill
Anay-208
I'm not sure what you mean.

layout.tsx is a Client component, hence metadata will not work. You can use useEffect on its children
That’s how it’s designed to work
HimalayanOP
Sure I have done that and it's working well
By the way the main aim is to add a RudderStack Tracker to the web
HimalayanOP
Thank you both @joulev and @Anay-208