Meta Tags Not Updating During Soft Navigation in Next.js 14.1.4 with App Router

[ekiyak]

Summary

I am using Next.js version 14.1.4 with the "app router" feature. In my project, I need to dynamically generate meta tags such as title, description, and keywords for dynamic pages. I am using the "generateMetadata" function for this purpose.

On the main page, I manage the meta tags statically within a "metadata" object. When listing products, I update the SEO information for the category using the "generateMetadata" function. Using console.log statements, I have confirmed that the data is being fetched server-side, so there is no issue with that.

Problem:

When I navigate from the main page to subpages using soft navigation (i.e., using the component), I notice that the meta tags in the browser do not update. Instead, the meta tags from the main page remain persistent. However, if I perform a hard refresh (F5) on any dynamic page, the meta tags are correctly updated. The issue seems to be that the meta tags do not update during soft navigation.

// app/page.js
import { ThemeProvider } from '@/components/theme-provider';

export const metadata = {
  title: "Page title",
  description: "Page description",
  keywords: "page keywords",
  openGraph: {
    title: "Page Title",
    description: "Page description",
    type: 'website',
    url: `https://mydomain.com/`,
    locale: 'tr_TR',
    site_name: 'My BrandName',
  },
};

export default function MainPage() {
  return (
    <div>
      <h1> Welcome to My Shop </h1>
      {/* Main page content */}
    </div>
  );
}

// app/[category]/page.js
import { getCategoryDetailByCategoryId } from '@/lib/api';

export async function generateMetadata({ params}) {
  const categoryId = params.slug[1];
  const data = await getCategoryDetailByCategoryId(0, categoryId);
  const res = data.group.length > 0 ? data.group[0].items.length > 0 ? data.group[0].items[0] : null : null;


  return {
    title: `Product Category - ${res.UrunGrubu}`,
    description: `Product Category - ${res.UrunGrubu}`,
  };
}

export default function KategoriPage({ params }) {
  return (
    <div>
      <h1> Category Page </h1>
      {/* Kategori içeriği */}
    </div>
  );
}

Could anyone help me understand why the meta tags are not updating during soft navigation and how to resolve this issue? Thank you!

Additional information

No response

Example

No response

[ekiyak]

Hello Next.js community,

I wanted to follow up on the issue I posted yesterday. I was able to resolve it by updating to a newer version of Next.js. When I started the project, I was using version 14.1.4. After investigating whether there were any changes in the newer versions that could address the issues I was experiencing, I found that updating from version 14.1.4 to 14.2.0 resolved the problem.

I observed that the issue was fixed without needing to make any changes to my code related to this matter.

Thank you for your support!

[meherchandan]

@ekiyak I am also facing the same issue and I am using the version 14.2.5. Is there any other fix you did?

[ekiyak]

Hello, There is no any other fix I did, so please share your some code and I will try to make a help

[meherchandan]

Thank you @ekiyak
I am using a turborepo and has multiple apps in it. The sample folder structure I have is

       testApp
        [locales]
         (main)
            -layout.tsx
            -page.tsx - This has generateMetaData function
            product
              -page.tsx - This has generateMetaData function

So this is a sample structure I have, Now when I am moving between routes(home route and product route) on browser, I am facing the same issue that you mentioned above. The page title is not updating. However if I do refresh, it display the correct title.

[ekiyak]

Hello. The "metadata" or "generateMetaData" functions are server-side functions. Therefore, you cannot call the "metadata" and "generateMetaData" functions in components where you are using the 'use client' directive. Here's the approach I follow: When I create my page.jsx file, I also call the generateMetaData function and include other child components that the page will use. I make sure not to use the 'use client' directive in the page.jsx. I only use the 'use client' directive in the child components if I needed. When reviewing your page.jsx code, ensure that all the code runs server-side. If the 'use client' directive is used, generateMetaData won't work. Now, I'm sharing my own code below.

Home Page Code Sample

export const metadata = {
    title: "My Site Title",
    description: "my site description",
    keywords: "my site keywords",
    openGraph: {
      title: "sample title",
      description: "sample description",
      type: 'website',
      url: `https://.com/`,
      locale: 'tr_TR',
      site_name :'Site Name'
    },
}

//HOME PAGE 
export default async function Home() {
  
  //SUB COMPONENTS
  return (
    <>
      
      <Slider/>
      <FavoriteProducts/>
      <MainProductCategories />
      <HomeLogos/>
    </>
  );
}

Product Page Code Samples

export const generateMetadata = async ({ params }) => {
    const productId = params.detail[1];
    const res = await actiongetproductdetail(productId);
    if (res) {
        return {
            title: res.productSeoTitle,
            description: res.productSeoDescription,
            keywords: res.productSeoKeywords,
            openGraph: {
                title: res.productSeoTitle,
                description: res.productSeoDescription,
                type: 'website',
                url: `https://.com/urun/${slugify(res.productSeoTitle)}/${productId}`,
                images: [
                  {
                    url: res.productImage,
                    alt: res.productSeoTitle,
                  },
                ],
                locale: 'tr_TR',
                site_name: 'MY Site Name'
            },
        }    
    }
    
}

const ProductDetailPage = ({params})=>{
    const productId = params.detail[1];
    return(
        <>
            <ProductDetail productId={productId}></ProductDetail>
        </>
    )
}

export default ProductDetailPage

[IslamAsankojoev]

I also use Next.js 14.2.5 and I have the exact same problem, even though I haven't added 'use client' anywhere
how i can fix it?
@ekiyak