Metadata not showing in tab Next.js 13.4.1 – Next.js

The Problem:

In Next.js 13.4.1, a user has defined a metadata object in their layout.jsx file, but it’s not being displayed in the browser tab. The user believes it might be related to using the "use client" directive in their JSX files since they’re planning to deploy their portfolio to Github Pages. They have tried adding the metadata object to their root page.jsx file, but that also didn’t resolve the issue.

The Solutions:

Solution 1:

Both static and dynamic metadata (generateMetadata) are only supported in server components. For more information, refer to the official documentation [here][1].

Solution 2: Separate Pages and Components

In Next.js, pages should not contain any React logic like useState or useEffect. Components, on the other hand, can use these hooks.

To resolve this issue, the metadata object should be defined in a page component without use client, while components can utilize use client for React logic.

For example, create a separate page component:

// page.js
export const metadata = {
  title: "My Awesome App",
  description: "Nice Description"
};

export default function Page() {
  return (
    <ContactForm />
  )
}

And a corresponding component:

// ContactForm.js
import { useState } from "react";
"use client";

export default function ContactForm() {
  const [myState, setMyState] = useState("Hi");

  return (
    <div>
      {myState}
    </div>
  )
}

Solution 3: Remove ‘use client’

In the given Next.js project, the ‘use client’ directive was used in the layout.jsx file. However, removing this directive allows the metadata defined in the layout to be displayed in the browser tab. This is because ‘use client’ limits the execution of the code to the client side, which can interfere with the rendering of server-rendered components like the metadata.

Solution 4: Use Server Side Component for Root Layout

Next.js requires the root layout component to be a server-side component to render the initial layout on the server side. When the user accesses the site, they receive an HTML file with the correct head tags created by Next.js using the “metadata” object, which defines the page title and description.

If the root layout or page is marked as a client component, Next.js will not render the title in the initial HTML file, and the JavaScript runtime will not recognize the “metadata” object. To avoid this issue, mark the root layout component as a server component.

Video Explanation: