Search code examples
next.jsmetadata

Setting title of NextJS site with pages folder

I'm trying to set a title of my NextJS site. In the docs I saw that the recommended way is to export the metadata const with the required title:

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'New Title',
};

However, the interface needs to be in a file which needs to be located in the app folder. The problem is that my project doesn't have an app folder, but src/pages instead.

I tried exporting the metadata const from src/pages/index.page.tsx, from src/pages/_app.page.tsx and from src/pages/_document.page.tsx, but no success.

Any ideas how can I do this?

Solution

  • the Metadata only supports on the App router not in the pages router, you needs to use next/head component to render meta data in the pages router.

    references - https://nextjs.org/docs/app/building-your-application/optimizing/metadata