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

Seo – How to set <title> of a client component in Next 13?

I’m migrating my Next 12 app to Next 13 and its new /app directory.

I have a <LoginPage> component (rendered @ /login) and obviously, it needs to use hooks to manage form data. As such, I have marked it with the 'use client' directive.

However, that means that the new metadata API can’t be used to set the <title>, which ideally, I’d like to be something as simple as Login | ${process.env.NEXT_PUBLIC_APP_NAME}.

Any help is appreciated!

Tags:

2

Answers


  1. 0

    You could use layout in login directory.

    enter image description here

    inside layout:

    import React from "react";
// this is server component. you could use `metadata` as well
const layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      <title>Login to my app</title>
      {children}
    </div>
  );
};

export default layout;
    Login or Signup to reply.
  2. 0

    Instead of Metadata, you can put the <title> tag directly into page.js among your components.

    export default function Page() {
  return (
    <>
      <title>Page title</title>

      <OtherComponents />
    </>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search