Use both Metadata and useState in page.jsx
Answered
Rainbow trout posted this in #help-forum
Rainbow troutOP
I made an about page in
about/page.jsx, and I want to set the title with export const metadata = { title: "About Page" }. However, I also want to use state hooks. Since pages are server components by default and state hooks are only allowed in client components, putting "use client" at the top-level doesn't allow me to export metadata. How do I go about doing this?Answered by B33fb0n3
you can create a component, that is a client component, that handles the useState and import that component into the page.tsx
7 Replies
@Rainbow trout I made an about page in `about/page.jsx`, and I want to set the title with `export const metadata = { title: "About Page" }`. However, I also want to use state hooks. Since pages are server components by default and state hooks are only allowed in client components, putting `"use client"` at the top-level doesn't allow me to export metadata. How do I go about doing this?
you can create a component, that is a client component, that handles the useState and import that component into the page.tsx
Answer
@Rainbow trout I made an about page in `about/page.jsx`, and I want to set the title with `export const metadata = { title: "About Page" }`. However, I also want to use state hooks. Since pages are server components by default and state hooks are only allowed in client components, putting `"use client"` at the top-level doesn't allow me to export metadata. How do I go about doing this?
you can see an exact example here: https://nextjs-faq.com/metadata-client-components
Rainbow troutOP
thanks i'll take a look
does this become hybrid? or does it become a completely client side rendered page?
@Rainbow trout does this become hybrid? or does it become a completely client side rendered page?
the page will still be rendered serverside. The client component will also be rendered serverside but clientside hydrated
Rainbow troutOP
ah ok thanks
happy to help