next-seo not working outside of _app.js

[danielmeeusen]

Whatever I put in other next pages weather they be dynamically generated or not does not show up in the initial render of the page thus does not replace what is defined in _app.js.

_app.js

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { CssBaseline, ThemeProvider } from '@material-ui/core';
import { darkTheme } from '../styles/themes';
import { ContextWrapper } from '../lib/AppContext';
import MainLayout from '../components/layout/MainLayout';

import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

export default function MyApp(props) {
  const { Component, pageProps } = props;
  const site = useSite();

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <>
      <DefaultSeo {...SEO } />
      <ContextWrapper>
        <ThemeProvider theme={darkTheme}>
          <CssBaseline />
          <MainLayout>
            <Component {...pageProps} />
          </MainLayout> 
        </ThemeProvider>
      </ContextWrapper>
    </>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

next-seo.config.js

export default {
  defaultTitle:  'MedisSite',
  openGraph: {
    title: 'MedisSite',
    type: 'website',
    locale: 'en_US',
    url: process.env.WEB_URI,
    images: [
      {
        url: '/image/ogHome.jpg',
      },
    ], 
    site_name: 'MedisSite',
  },   
  
  additionalMetaTags: [
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
    },
    {
      name: 'application-name',
      content: 'MedisSite',
    },
    {
      name: 'apple-mobile-web-app-capable',
      content: 'yes',
    },
    {
      name: 'apple-mobile-web-app-status-bar-style',
      content: 'black',
    },
    {
      name: 'apple-mobile-web-app-title',
      content: 'Me',
    },
    {
      name: 'format-detection',
      content: 'telephone=no',
    },
    {
      name: 'mobile-web-app-capable',
      content: 'yes',
    },
    {
      name: 'msapplication-config',
      content: '/browserconfig.xml',
    },    
    {
      name: 'msapplication-TileColor',
      content: '#000000'
    },
    {
      name: 'msapplication-tap-highlight',
      content: 'no'
    },
    {
      name: 'theme-color',
      content: '#000000'
    },
  ],
  
  additionalLinkTags: [
    {
      rel: 'apple-touch-icon',
      href: '/icon/apple-touch-icon.png'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '152x152',
      href: '/icon/apple-touch-icon-152x152.png'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      href: '/icon/apple-touch-icon-180x180.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      href: '/icon/favicon-32x32.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      href: '/icon/favicon-16x16.png'
    },
    {
      rel: 'manifest',
      href: '/manifest.webmanifest'
    },
    {
      rel: 'mask-icon',
      href: '/icon/safari-pinned-tab.svg',
      color: '#000000'
    },
    {
      rel: 'shortcut icon',
      href: '/icon/favicon.ico'
    },
  ],
}

post/[postId].js

import React from 'react';
import { NextSeo } from 'next-seo';
import PropTypes from 'prop-types';
import nc from 'next-connect';

import DeskPost from "@/components/post/desk-post/DeskPost";
import MobilePost from "@/components/post/mobile-post/MobilePost";

import { withWidth, Hidden } from '@material-ui/core';

import { findPostById } from '@/api-lib/db';
import { database } from '@/api-lib/middlewares';
import { useCurrentUser } from '@/lib/user/hooks';


function Post({ post }) {
  const [user, { mutate }] = useCurrentUser();
  const title = post.part ? `${post.title} - ${post.part}` : post.title
  const url = `${process.env.WEB_URI}post/${post.id}`;
  const image = post.UHDstills.main;

  return (
    <>
        <NextSeo
          title={title}
          openGraph={{
            url: url,
            title: title,
            images: [
              {
                url: image,
              }
            ]
          }}
        />

      <Hidden smDown>
        <DeskPost post={post} />
      </Hidden>


      <Hidden mdUp>
        <MobilePost post={post} />
      </Hidden>
    </>
  );
};

Post.propTypes = {
  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
};

export default withWidth()(Post);


export async function getServerSideProps(context) {
  await nc().use(database).run(context.req, context.res);
  const post = await findPostById(context.req.db, context.params.postId);

  if(!post) {
    return {
      notFound: true,
    };
  }
  post.publishDate = post.publishDate.toJSON();
  post.shootDate = post.shootDate.toJSON();
  return { props: { post }};
}

Any help would be very much appreciated...

[RamZallan]

@garmeeh are you aware of this issue? Seems to be breaking the overall functionality.

[aravind-eng]

We are seeing the same issue. Is there any solution to this issue?

[wescopeland]

We had to roll back to 5.2.0 as a result of this issue.

[garmeeh]

If someone can provide a codesandbox/github repo recreating this issue I can look into this.

[joelhooks]

we had this issue and it appears that the meta is rendering client side but not server side (so it's not in view source)

In our case we had to downgrade to 4.29.0 (pr)for it to start appearing again.

For us, it was working previously but stopped after this commit (pr merge) https://github.com/skillrecordings/products/commit/9f2e9dcc5d368d237209e5a42071b73944c99061

preview -> https://badass-turbo-git-jh-package-management-skillrecordings.vercel.app/

here's the PR, you can see the previews https://github.com/skillrecordings/products/pull/289 (note the first one, advanced-typescript is NOT using next-seo yet)

We can't identify anything that might be the culprit, but we are reconfiguring our monorepo and various implicit dependencies got rearranged

[pliashkou]

in our case it stoped working wrapped into <PersistGate> from Redux

[joelhooks]

As a temporary solution I cut and pasted the very well organized and simple to follow source for this great project into my repo directly and it stabilized. I've been exploring issues with our project structure and dependency graph to try and isolate why this is happening in our case. Will report back if I learn anything.

https://github.com/skillrecordings/products/pull/324

[garmeeh]

Hey @joelhooks, sorry to hear you are still having issues. Can I confirm that you addressed any breaking changes when updating from V4 -> V5?

https://github.com/garmeeh/next-seo/releases/tag/v5.0.0

[joelhooks]

We aren't using any of those features @garmeeh - I haven't investigated further. I'm sure it's related to our config.

[logotip4ik]

For me issue was resolved after downgrading next to version lower 12.2.0 🤷‍♂️

[joeporpeglia]

I just ran into this in a monorepo with multiple nextjs apps. Pinning all of the apps to the same nextjs version fixed it. Seems like a different issue if others can reproduce without a monorepo, but might be related.

Edit: This was the node_modules structure before pinning the nextjs version:

$ find node_modules -type d -name "next"
node_modules/next
node_modules/next-seo/node_modules/next

Considering <Head> uses react context, my guess is that there were two instances of the head context used for the server/static render.

[heymartinadams]

Quite an intractable problem! In case it helps:

1. Was unable to reproduce the issue in a stand-alone, bare-bones NextJS app using v5.5.0 and latest [email protected]. Worked fine without a problem.
2. In my own app, where it doesn’t work, I downgraded next-seo all the way to 4.6.0 but the issue was still there, leading me to think it may not be related to any updates to v5.
3. @garmeeh in case you’re interested, I can add you to my repo so you can play around with it and test. If so, please let me know.

My app: the DefaultSeo appears here: https://simplerlist.com/ NextSeo does not appear here: https://simplerlist.com/blog/posts/the-gift-of-being-organized

[heymartinadams]

Looks like this issue lies with next 🚀 Here’s a workaround (tested and works, yay!) 💥 https://github.com/vercel/next.js/issues/35172#issuecomment-1169362010

[garmeeh]

@heymartinadams a big thank you for the follow up! 🙏

[danielmeeusen]

@heymartinadams sorry for the lack of follow up on this but thank you this solution did work for me ☺️

[egecavusoglu]

I just ran into this in a monorepo with multiple nextjs apps. Pinning all of the apps to the same nextjs version fixed it. Seems like a different issue if others can reproduce without a monorepo, but might be related.

Edit: This was the node_modules structure before pinning the nextjs version:

$ find node_modules -type d -name "next"
node_modules/next
node_modules/next-seo/node_modules/next

Considering <Head> uses react context, my guess is that there were two instances of the head context used for the server/static render.

A little weird but, we also had a monorepo setup with 2 next.js apps and syncing both to 13.1.2 seems to fix the issue.