custom script tag for home page alone

Unanswered

Egyptian Mau posted this in #help-forum

Egyptian MauOP

2024-04-27T10:42:05.563Z

Hello,

I am currently using Nextjs v14 App Router, and I want to add custom script script:ld+json in the <Head> tag of the Home Page alone not to any others pages, how I can achieve the same?

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld

I've checked this Code, but this adds in the body of the HTML, not into the HEAD , can any one help me how to add this it in HEAD instead of BODY and that too only for Index/Home Page?

14 Replies

Egyptian MauOP

2024-05-02T10:31:27.355Z

any help?

Egyptian MauOP

2024-05-05T01:57:45.101Z

Egyptian MauOP

2024-05-07T02:41:37.576Z

any help?

Egyptian MauOP

2024-05-10T01:01:25.803Z

any help?

Egyptian MauOP

2024-05-11T01:30:36.239Z

any help on this?

Berlim

2024-05-11T02:23:44.408Z

Create a layout.tsx in the same level as your page.tsx

Then define the return in layout.tsx as

return (
<html lang="en" className="">
<head>
YOUR SCRIPT HERE
</head>
<body className={${inter.className}}>
{children}
</body>
</html>
);

Jboncz

2024-05-11T02:54:51.191Z

if hes talking about actually making the head only apply if the route is '/' you would need to have some logic in the layout that gets the path and applies the header based on that.

import { usePathname } from 'next/navigation'

const pathName = usePathname();

return (
    <html lang="en" className="">
      <head>
         {pathname == '/' ? script : null}
      </head>
      <body className={${inter.className}}>
        {children}
      </body>
    </html>
  );