meta tag in Head from next/head is not working in app router next js #68692

dashranjin · 2024-08-08T08:26:03Z

dashranjin
Aug 8, 2024

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 16090
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: N/A
  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: 5.5.3
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 example does this report relate to?

layout.tsx

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

the meta tags in next js page router was working fine and not in app router layout

Expected Behavior

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

export default function App({ Component, pageProps }: AppProps) {
return (
<>

<title>Ttitle</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </Head>
  <Component {...pageProps} />
</>

);
}

To Reproduce

"use client";
import { Rubik } from "next/font/google";
import "./globals.css";
import Head from "next/head";
const rubik = Rubik({
subsets: ["latin", "cyrillic"],
weight: ["300", "400", "500", "600", "700", "800", "900"],
});

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>

<title>Title</title>

<body className={rubik.className + " fixed h-screen w-screen"}>
{children}

</>
);
}

Answered by tiberiutudorancea

Aug 8, 2024

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 16090
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: N/A
  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: 5.5.3
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 s…

View full answer

tiberiutudorancea · 2024-08-08T11:10:08Z

tiberiutudorancea
Aug 8, 2024

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 16090
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: N/A
  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: 5.5.3
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 example does this report relate to?

layout.tsx

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

the meta tags in next js page router was working fine and not in app router layout

Expected Behavior

import "@/styles/globals.css"; import type { AppProps } from "next/app"; import Head from "next/head";

export default function App({ Component, pageProps }: AppProps) { return ( <> <title>Ttitle</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </Head>
  <Component {...pageProps} />
</>
); }

To Reproduce

"use client"; import { Rubik } from "next/font/google"; import "./globals.css"; import Head from "next/head"; const rubik = Rubik({ subsets: ["latin", "cyrillic"], weight: ["300", "400", "500", "600", "700", "800", "900"], });

export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <> <title>Title</title> <body className={rubik.className + " fixed h-screen w-screen"}> {children} </> ); }

That should work

import { Rubik } from "next/font/google";
import "./globals.css";
import { Metadata } from 'next';

const rubik = Rubik({
  subsets: ["latin", "cyrillic"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: 'Title',
  viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={rubik.className + " fixed h-screen w-screen"}>
        {children}
      </body>
    </html>
  );
}

1 reply

joelrb Sep 30, 2024

This "export const metadata: Metadata" does not work if the layout is marked as "use client".

Using <Head> doesn't work at all. Nothing shown in the page source of all browsers!

Using latest NextJS version.

Nothing!!!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

meta tag in Head from next/head is not working in app router next js #68692

{{title}}

Replies: 1 comment 1 reply

{{title}}

Verify canary release

Provide environment information

Which example does this report relate to?

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

meta tag in Head from next/head is not working in app router next js #68692

dashranjin Aug 8, 2024

Verify canary release

Provide environment information

Which example does this report relate to?

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

Verify canary release

Provide environment information

Replies: 1 comment · 1 reply

tiberiutudorancea Aug 8, 2024

Verify canary release

Provide environment information

Which example does this report relate to?

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

joelrb Sep 30, 2024

dashranjin
Aug 8, 2024

Replies: 1 comment 1 reply

tiberiutudorancea
Aug 8, 2024