Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
dashranjin opened this issue Aug 8, 2024 · 1 comment
Closed
1 task done

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

dashranjin opened this issue Aug 8, 2024 · 1 comment
Labels
examples Issue was opened via the examples template.

Comments

@dashranjin
Copy link

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}


</>
);
}
@dashranjin dashranjin added the examples Issue was opened via the examples template. label Aug 8, 2024
@tiberiutudorancea
Copy link

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>
  );
}

@vercel vercel locked and limited conversation to collaborators Aug 8, 2024
@samcx samcx converted this issue into discussion #68692 Aug 8, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dashranjin @tiberiutudorancea