CODEWITHSUNDEEP
next.jsseoserver-side-rendering
Big boy
Big boy

Reputation: 1761

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?

Upvotes: 16

Views: 9030

Answers (4)

Poornesh H N
Poornesh H N

Reputation: 134

As Sefa Kocaaga answered, it works similarly to previous versions. It is rendered on the server side and hydrated on the client side. You can read about it here.

https://nextjs.org/docs/getting-started/react-essentials#client-components

Upvotes: 1

Sefa Kocaaga
Sefa Kocaaga

Reputation: 161

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.

Upvotes: 16

Yilmaz
Yilmaz

Reputation: 49551

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.

Upvotes: 0

user20386762
user20386762

Reputation: 177

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
}

Upvotes: 1

Related Questions