Next/head no longer works for pages router #68346

pearcircuitmike · 2024-07-31T02:29:01Z

Link to the code that reproduces this issue

https://github.com/pearcircuitmike/replicate-codex

To Reproduce

npm run dev on the provided repo and inspect the pagesource. You will see zero meta from the metatags component rendered in the pagesource. You can check the deployed version at the public URL as well and you'll see it's not present any more there either.

Current vs. Expected behavior

I import a MetaTags.js component, in index.js for example...

import React, { useEffect, useState } from "react";
import MetaTags from "../components/MetaTags.js";
...

export default function Home() {
  const [isMobile] = useMediaQuery("(max-width: 480px)");
  ... a bunch more...

 ...

  return (
    <>
      <MetaTags
        title={"Your Roadmap to the AI Revolution - AIModels.fyi"}
        description={
          "AImodels.fyi scans repos, journals, and social media to bring you the ML breakthroughs that actually matter, so you spend less time reading and more time building."
        }
      />
     ...rest of component
     </>
}

I expect that when I view the pagesource, the meta would be there. It is not. This also means no OG images generated for social sharing, etc. ... NOTE that the meta IS there when you inspect the console.

This is following the exact implementation specified in the docs which no longer works: https://nextjs.org/docs/pages/api-reference/components/head

In /components/MetaTags, for reference:


export default function MetaTags({
  title = "AI Models",
  description = "Explore the world of AI Models.",
  socialPreviewImage = "",
  socialPreviewTitle = "",
  socialPreviewSubtitle = "",
}) {
  // Access the environment variable; it returns a string
  const baseUrl = process.env.NEXT_PUBLIC_SITE_BASE_URL;

  // Construct the URL with encoded parameters for dynamic social media images
  const ogImageUrl = `${baseUrl}/api/og?image=${encodeURIComponent(
    socialPreviewImage
  )}&title=${encodeURIComponent(
    socialPreviewTitle
  )}&subtitle=${encodeURIComponent(socialPreviewSubtitle)}`;

  return (
    <Head>
      <meta httpEquiv="content-language" content="en" />
      <title>{title}</title>
      <meta name="description" content="HELLO" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={baseUrl} />
      <meta property="og:image" content={ogImageUrl} />
      <meta property="og:type" content="website" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta property="twitter:description" content={description} />
      <meta property="twitter:image" content={ogImageUrl} />
      <link rel="icon" href="/favicon.ico" />
    </Head>
  );
}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:25 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T8110
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 21.7.1
  npm: 10.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended! 
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.5) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

This app is hosted on Vercel, and this issue wasn't present and Head was working until 4-6 weeks ago.

The text was updated successfully, but these errors were encountered:

pearcircuitmike · 2024-07-31T02:36:06Z

You'll notice a response to this stackoverflow question is based on a similar failure: https://stackoverflow.com/questions/57794743/head-tags-doesnt-change-in-dynamic-page-with-next-head

icyJoseph · 2024-07-31T06:52:35Z

Hi,

You have this bit:

  if (loading) {
    return <div>Loading...</div>; // Or your custom loading component
  }

That loading flag comes from:

  const { user, loading } = useAuth();

And the useAuth hook return this initial state:

  const [state, setState] = useState({
    user: null,
    loading: true,
    firstTimeUser: false,
    hasActiveSubscription: false,
  });

And the loading flag, as expected, changes only through user interaction, or useEffect, which only run client side, not during SSR.

This is important, because it is a pitfall that many run into.

I wrote PR that updating the docs to mention this pitfall, but I haven't had time to keep up with it, #63532

So what is going on? During the SSR pass, your custom App, in _app, hits the if (loading) {} branch, and just renders a div with inner text Loading.

If you open your site, with JavaScript disabled, you'll see the Loading text.
You can also do view-source:https://your-site-url.domain, and will see Loading text there

The problem is then, that this return statement, never happens! So your page Component is not rendered, and that's why the MetaTags component rendering output is nowhere to be seen!

// this never happens on the server side render pass
  return (
    <RouteGuard>
      {/* other components */}
           <Component {...pageProps} />

One way to try and fix this is to pass the loading prop to your page (or consume it through context from useAuth), and then, render what can be rendered while we are at the initial state, and then have a branch that returns null, and instead of having _app branch out like that, overlay the UI with the Loading... text.

It is really up to you how you fix this issue, but I hope it is clear that it is not a Next.js issue, rather, it is caused by your code.

samcx · 2024-08-06T05:26:16Z

@icyJoseph Thanks for responding! I'll look to have your :docs: :pr: reviewed as well :frog-eyes:

github-actions · 2024-08-20T12:04:08Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

pearcircuitmike added the bug Issue was opened via the bug report template. label Jul 31, 2024

github-actions bot added the Metadata Related to Next.js' Metadata API. label Jul 31, 2024

samcx closed this as completed Aug 6, 2024

github-actions bot added the locked label Aug 20, 2024

github-actions bot locked as resolved and limited conversation to collaborators Aug 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next/head no longer works for pages router #68346

Next/head no longer works for pages router #68346

pearcircuitmike commented Jul 31, 2024

pearcircuitmike commented Jul 31, 2024

icyJoseph commented Jul 31, 2024 •

edited

Loading

samcx commented Aug 6, 2024

github-actions bot commented Aug 20, 2024

Next/head no longer works for pages router #68346

Next/head no longer works for pages router #68346

Comments

pearcircuitmike commented Jul 31, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

pearcircuitmike commented Jul 31, 2024

icyJoseph commented Jul 31, 2024 • edited Loading

samcx commented Aug 6, 2024

github-actions bot commented Aug 20, 2024

icyJoseph commented Jul 31, 2024 •

edited

Loading