Next 13 does not show Head elements-CodePudding

I upgraded to next13. The directory structure I have is:

pages/post/[id.jsx]

The Head is coded within the file and used to work is as follows:

    return <>
<Head><title>{post.title.substring(0, 40)}</title>
<meta name="description" content={post.title} />
<link rel="canonical" href={process.env.WEB_URI} />
    
    </Head>
    
    ...

Nothing shows up in view source under . It used to before I upgraded to next 13. Is this expected behavior and do I need to add a special Head.js file? I am still using the pages directory.

CodePudding user response：

The correct answer is - all tags to be used in <Head> are needed to be added to pages/_document.js or _app.js first.

I used pageProps.title in _app.js and in the pages such as /post/[id] I passed title:"my title" in getServersideProps.

Hope this helps others.

In app.js add

<meta property="og:title" content={pageProps?.title} />

In post/[id].js pass the value as below (the title passed here will be available to app.js as pageProps.title:

export async function getServerSideProps(context) {
  ..
  let post = await getPost(db, context.req, context.params.id);
  if (!post) (post={isEmpty: true});
  ..
  return {
    props: {
      post,
      ..
      title: post.title,

CodePudding user response：

When using the pages directory Head should still work. Are you using import Head from 'next/head'? Here is the upgrade guide.