Metadata API doesnt work with components marked with "use client" #46368
Replies: 6 comments 5 replies
-
|
As of version 13.2 metadata works only on server components such as The That being said it's best if you define metadata in |
Beta Was this translation helpful? Give feedback.
-
|
You mean that metadata need either |
Beta Was this translation helpful? Give feedback.
-
|
When using a UI library like material UI, Mantine, Chakra UI which requires you wrap your entire root element with their Provider, it only works when you make them a client component, while the new update for the metadata API only works for client components, please this conflicts should be looked in or better still make the metadata API accepts both client and server components. |
Beta Was this translation helpful? Give feedback.
-
|
You can still use them in a server component: // provider.js
'use client'
import { Provider } from 'design-system'
export default ProviderIn your root layout (a server component): import Provider from './provider'
export default Layout({ children }) {
return <Provider>
<html>
<body>{children}</body>
</html>
</Provider>
}
export const metadata = {
...
}So the provider will be a client component that wraps everything. |
Beta Was this translation helpful? Give feedback.
-
|
There is probably a good reason why the project has moved to the Metadata API but by making this change Next forces everyone to rewrite their components to support Metadata, especially because the Head file will be deprecated. This is not a small version bump. This is a breaking change. |
Beta Was this translation helpful? Give feedback.
-
I've the same problem. I'm new with |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I agree. I don't see a reason why it should not be possible for the new metadata API to work with client components. If metadata is not allowed in client components, the compiler could take care of splitting the metadata into its own file. Now devs need to split components. This forces devs to basically recreate the Head.js file for client side components, but without a standard, making projects across developers less consistent. It would be great if the compiler itself could take care of this. |
Beta Was this translation helpful? Give feedback.
-
|
I have this problem for example with Google Tag Manager where I need to send data to it with this code : const router = useRouter();
const pageview = (url: string) => {
// @ts-ignore
window.dataLayer.push({
event: 'pageview',
page: url
});
};
useEffect(() => {
router.events.on('routeChangeComplete', pageview);
return () => {
router.events.off('routeChangeComplete', pageview);
};
}, [router.events]);Wanted to put it in my |
Beta Was this translation helpful? Give feedback.
-
|
After |
Beta Was this translation helpful? Give feedback.
-
|
For those who are still facing this issue, follow these simple steps:
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
As in title - Metadata API doesnt work with components marked with "use client". Instead, they take the metadata from my layout.tsx. When I remove the "use client" directive from component, it suddenly accepts the local metadata object.
What should I do to fix this? Use next/head?
EDIT :
next/head doesn't work either.
Beta Was this translation helpful? Give feedback.
All reactions