Question 22341 in SEO Question posted in
Some basic information to get you started with this can be found here.

How to handle SEO for client components in Next.js 13?

I’m confused on how to manage SEO for client components in Next.js 13.

Let’s say I want to create a contact us page at /contact

In the new framework, I should create a folder named contact inside the app directory. And in it I should create a page called page.js by convention.

Now I need to create a form, which of course needs to manage its state. Thus I should use useState or other hooks from react.

But when I do that, Next.js compiler complains that it’s a server component and if I want to use it on the client-side, I should mark it with 'use client' directive at the top.

But I don’t want the component to be rendered on the client-side. I need my /contact page to be indexed by search engines.

What should I do?

Tags:

3

Answers


  1. 0

    You can’t use hooks on server components. Server components are rendered on the server side, and thus can’t hold state like client-components. Try moving the form into a new, client-side component, and render that from the /contact-page

    page.js

    const ContactPage = () => {
  // set your SEO headers etc here
  return (
    <CustomForm />
  )
}

    CustomForm.jsx

    'use client'
const CustomForm = () => {
  // Handle your state and form rendering in this component
}
    Login or Signup to reply.
  2. 0

    You can use next-seo npm package. you can find the examples for normal pages.

    for app directory usage read the docs

    Key Changes

    Next.js no longer de-duplicates tags in the head. This means that we
    can no longer use in the same way. Going forward we
    will solely be use <NextSeo />

    head.js does not currently support tags that do no have src="". So for JSON-LD components they
    now have to be added via the page. This will result in them being
    added to the of the page. This is 100% ok for SEO and not to
    worry about. This was confirmed by Google. I have also validated this
    using schema tool.

    Next.js no longer auto adds the tags below to your
    app that you will likely need. I suggest adding them to your root
    layout in a tag.

    Login or Signup to reply.
  3. 0

    use client does not mean that your component will be rendered on client only.

    It works as previous versions of Next.js.

    It will be rendered on server and hydrated on client.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search