How do I change my head title for different pages in Next.js's app directory?-CodePudding

In the app folder of Next.js 13, I have a default rootlayout:

import "./globals.css";
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <head />

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

And now I've created an account folder for the account page; I've created a page.js file there and also tried to create a layout file so that I can change the title; I saw a video on youtube where they change it like this code:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>account page</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <head />

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

And it works for them, but when I try it myself it gives me an error:

1.validateDOMNesting(...): <html> cannot appear as a child of <main>.
2.You are mounting a new html component when a previous one has not first unmounted. It is an error to render more than one html component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <html> and if you need to mount a new one, ensure any previous ones have unmounted first.

Maybe I understand a little bit, I've already used the rootLayout I can't use the rootLayout again.

CodePudding user response：

as far as I understood you are creating the second RootLayout inside the page folder. You have to remove the

<html lang="en">
  
</html>

Because rootLayout already has html element, and it renders children components. this children component is rendered inside the body element (you can confirm from chrome dev tools ). And now you are having <body><html> </html></body> structure

CodePudding user response：

In the app directory, the root layout wraps all nested ones, so as you did, you end up with two nested <html> with their <body> and everything, and that's not correct.

Your nested layout should only return something that can go directly into the {children} part of the first one. To change the <head> of any page, even the root one, consider using head.js file:

The head.js special file allows you to configure the <head> tag for a route segment.

// app/user/head.js

export default function Head() {
  return (
    <>
      <title>My User Page Title</title>
    </>
  );
}

As I told above, if you just create a project with Create Next App command, you would see in the root layout this code with the comment:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>{children}</body>
    </html>
  );
}