NextJs - Where can we add a

Question

In NextJs application, I want to add <script> code but not getting where to add and how? I tried by adding it in .js file but didn't recognise.

In react, we have index.html to add these things, what about in Nextjs app?

Dennis Vash · Accepted Answer

To edit the index.html, the equivalent in NextJS is the _document.js file.

A custom Document is commonly used to augment your application's <html> and <body> tags.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <script>...</script>
        </body>
      </Html>
    )
  }
}

If you only want to append elements to <head> tag (for a specific page), use next/head:

import Head from 'next/head'

function IndexPage() {
  return (
    <>
      <Head>
        <script>....</script>
      </Head>
    </>
  )
}

NextJs - Where can we add a <script> code?

Tags:

javascript

html

reactjs

next.js

Shruthi R

1 Answers

Dennis Vash

Recent Activity

Donate For Us