CODEWITHSUNDEEP
next.jsseoserver-side-renderingnext.js13
villasv
villasv

Reputation: 6841

Adding a <link> tag to <head> using Next.js>13.3 with appDir enabled

The documentation for using appDir on Next.js 13.4 states the following:

Step 3: Migrating next/head

In the pages directory, the next/head React component is used to manage HTML elements such as title and meta. In the app directory, next/head is replaced with the new built-in SEO support.

But the next/head component was able to add non-SEO tags too. In particular, I want to add <link rel="..."> tags. How does one accomplish this if the metadata mechanism doesn't seem to support link tags (just custom <meta> tags)?

I can't add the tags directly to the root layout because there are tags that are only supposed to live on the website home page. I could conditionally add the tags to the root layout if the layout was aware of the current route but it doesn't seem to work with SSG.

Upvotes: 17

Views: 22159

Answers (4)

linxie
linxie

Reputation: 2167

I think the document covered how to add <link rel="..."> tags, you just need to follow their predefined way.

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#manifest https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons

// in your app/page.tsx export metadata
export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
};

export default function Page() {
    ... // your code here
}

<link rel="manifest" href="https://nextjs.org/manifest.json" />
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>

verified with [email protected]

Upvotes: 13

Yilmaz
Yilmaz

Reputation: 49551

I followed typescript type

import type { Metadata } from 'next'

If you go to Metadata interface (in vscode press "ctrl" and click on "metadata"), it has

 archives?: null | string | Array<string>;
/**
 * The assets link rel property.
 * @example
 * ```tsx
 * "https://example.com/assets"
 * <link rel="assets" href="https://example.com/assets" />
 * ```
 */

archives is not only property. if you check the Metadata interface, you can find a suitable option for your need

robots?: null | string | Robots;

//The canonical and alternate URLs for the document.
alternates?: null | AlternateURLs;

icons?: null | IconURL | Array<Icon> | Icons;

Upvotes: 0

Tochi Bedford
Tochi Bedford

Reputation: 392

Trying Next 13 for the first time right now too, and in the default layout.tsx file, I placed my link tags like so:

<html lang="en">
  <head>
    <link rel="preconnect" href="xyz.com" />
  </head>
  <body >{children}</body>
</html>

and my link tags show up correctly in the browser. This also seems to work correctly with the exported metadata object, so I left the rest of the metadata tags in the new recommended format.

Upvotes: 3

sensorario
sensorario

Reputation: 21658

What about file based metadata?

Once a file is defined, Next.js will automatically serve the file (with hashes in production for caching) and update the relevant head elements with the correct metadata, such as the asset's URL, file type, and image size.

You MUST add a global.css file in app folder, ... ad import it inside your layout. This is working for me.

.redtext { color: red;}

import './foo.css'

export const metadata = {
    title: 'mamma mia'
}

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <div className="redtext">test rosso</div>
                <div id="root-container">{children}</div>
            </body>
        </html>
    )
}

Upvotes: 0

Related Questions