How to set metadata to page.tsx rendered as client components?
export const metadatasyntax seems to not work if
page.tsxis a client component. How do I set my page title and other metadata then?
generateViewport exports are only supported in server components. Hence, you need to make your page a server component to use them. A method to do that is to move all your client-side logic to a separate client component and import that client component to the now-server component
page.tsx. So instead of
you need to make a new client component, say
page.client.tsx, and import it to
As far as I know, there isn't an official guide for this yet, and I am looking forward to an official guide on this soon. If you know of the officially recommended way to do it, please help me improve this page. For now I'm using the following workaround which seems to work well, but as long as it is not officially endorsed by the Next.js documentation or the React.js documentation, it is only a workaround for now so use at your own risk.