Loading...

How to define metadata in a client component in Nextjs?

question nextjs react
Ram Patra Published on November 17, 2024

Nextjs does not allow defining the metadata object in client components. There are a couple of ways to resolve this problem. I will be talking about two of them here.

In case you aren’t aware of this, the new metadata object looks like below:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "",
  description: "",
};

Now, the most obvious way would be to extract the code that needs client components and put it another file. This way you can remove the "use client" from your page.tsx file and put it in your new file where you have the extracted code.

But if you’re not willing to do this for whatever reason, an easier way would be to just place a simple layout.tsx file in the same directory as your page.tsx.

I am sharing a sample layout.tsx file from one of my projects:

import type { Metadata } from "next";


export const metadata: Metadata = {
  title: "Black Friday Deals 2024 - macOS apps",
  description: "A directory of macOS apps that are free or 50% off for a limited time.",
};

export default function BfdLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {children}
    </>
  )
}

The above approach doesn’t need you to modify your page.tsx.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on November 17, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs cloudflare March 19, 2025 How to run a website built with Next.js 15 on Cloudflare Pages?

If you simply connect a website’s code on GitHub with Cloudflare Pages that’s built using Next.js 15+, it may not build successfully out of the box. If this is the case with you, make sure to do the following.

question nextjs react July 9, 2024 How to define an enum in Typescript and use it in a Next.js app?

Creating an enum in TypeScript within a Next.js project is straightforward. Enums in TypeScript allow you to define a set of named constants that can be used to represent a collection of related values. Here’s how you can create and use an enum in a Next.js application:

question nextjs react July 9, 2024 How to create global types in Typescript in a Next.js app?

The env.d.ts file is typically used for global type declarations, especially for environment variables and other globally available types. This file is automatically included in the TypeScript compilation if it’s referenced in tsconfig.json.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.