Inifinite loading with generateMetadata in Next.js 15.3.3 and React 19.2

Question

I’m trying to generate dynamic metadata using the built-in Next.js method generateMetadata. On localhost, it works: it fetches the title, reads the related article, and generates the metadata in the <head> tag.

However, when I deploy to my development environment, I get the well-known infinite loading issue in Next.js 14. I have tried every existing fix. Everything works locally but nothing works on the dev environment.

Here is the folder structure:

/article 
    /[title]
        page.tsx
        articleContent.tsx
    layout.txt
    page.tsx

I read that having a parent layout should not interfere with generateMetadata. I even tried removing it, and it still doesn’t work.

/article/layout.tsx

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <head>
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
          rel="stylesheet"
        />
      </head>
      <body>
        <ToastProvider />
        {children}
      </body>
    </html>
  );
}

/article/[title]/page.tsx

type Props = {
  params: Promise<{ title: string }>;
};

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const { title } = await params;
  const article = await NewspaperService.assetNewspaperArticleRead(1);
  return {
    title: "Article",
    description: "Article Hacker ouvert.",
  };
}

export default async function Page({ params }: Props) {
  const { title } = await params;
  return
}

As you can see, this method is very simple and simplified for the example. I noticed that the infinite loading is caused by the line:

 const article = await NewspaperService.assetNewspaperArticleRead(1); const article = await NewspaperService.assetNewspaperArticleRead(1);

But according to the official documentation, async calls should no longer cause infinite loading.

For this example, the Page function returns nothing, but that doesn’t really matter because it never gets reached anyway.

Kapricorn · Accepted Answer · 2025-11-18 09:47:35Z

0

Async generate Metadata with await calls in Next.js 14-15 can cause infinite loading, especially in environments other than localhost.

answered Nov 18 at 9:47

Kapricorn

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

user25502815 Nov 18 at 10:19

Thank's for the quick answer, I think i partially found the problem, when fetching on my dev API in dev env, this doesn't work. But when i fetch de prod API it works ! I'm just giving up on dev and pushing in prod ...

Collectives™ on Stack Overflow

Inifinite loading with generateMetadata in Next.js 15.3.3 and React 19.2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related