Next.js Discord

Discord Forum

How do I add script tag or any other tags in head from a page.js (App Router)

Answered
XotEmBotZ posted this in #help-forum
Open in Discord
XotEmBotZOP
Earlier I could use next/head to insert those tags but what is the procedure for it now?
Answered by joulev
using the metadata object syntax as Pearls mentioned is the recommended approach for easy maintainability. but if you must render the tags depending on the values in your component, then:

<title> and <meta> tags: you can just render them directly in the component

<link>: same as above with some exceptions, read here: https://react.dev/reference/react-dom/components/link#special-rendering-behavior

<script>: <script src="..." async={true} /> https://react.dev/reference/react-dom/components/script#special-rendering-behavior

<style>: pass href and precedence https://react.dev/reference/react-dom/components/style#special-rendering-behavior
View full answer

4 Replies

Pearls
Nextjs has a custom Script tag to help you with that, it might be worth it to read this piece of documentation:
page router:
https://nextjs.org/docs/pages/api-reference/components/script

app router:
https://nextjs.org/docs/app/api-reference/components/script
Pearls
elements like meta tags can be added by changing/adding the metadata object.
When creating a nextjs project using the cli your layout file will automatically have a metadata object inside of it, itl look something like this:
export const metadata: Metadata = {
  title: '...',
  description: '...',
}


Heres the documentation for it:
https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Example usage:
export const metadata: Metadata = {
    title: "Your title",
    description: "your description",
    icons: [
        {
            rel: "icon",
            url: "/favicon.svg",
        },
    ],
    openGraph: {
        title: "Title",
        type: "website",
        url: "...",
        description: "Description",
        siteName: "Title",
        images: [
            {
                url: "/favicon.svg",
                alt: "alt",
            },
        ],
    },
    twitter: {
        title: "Title",
        site: "@...",
        card: "summary_large_image",
        creator: "@...",
        images: [
            {
                url: "/favicon.svg",
                alt: "...",
            },
        ],
    },
};
@XotEmBotZ Earlier I could use next/head to insert those tags but what is the procedure for it now?
joulev
using the metadata object syntax as Pearls mentioned is the recommended approach for easy maintainability. but if you must render the tags depending on the values in your component, then:

<title> and <meta> tags: you can just render them directly in the component

<link>: same as above with some exceptions, read here: https://react.dev/reference/react-dom/components/link#special-rendering-behavior

<script>: <script src="..." async={true} /> https://react.dev/reference/react-dom/components/script#special-rendering-behavior

<style>: pass href and precedence https://react.dev/reference/react-dom/components/style#special-rendering-behavior
Answer