Skip to content

Instantly share code, notes, and snippets.

@IanMitchell
Created January 19, 2017 17:41
Show Gist options
  • Save IanMitchell/f0963067da9eb85f292cd0a86e012474 to your computer and use it in GitHub Desktop.
Save IanMitchell/f0963067da9eb85f292cd0a86e012474 to your computer and use it in GitHub Desktop.
Custom Script Tags using Next.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class CustomDocument extends Document {
static async getInitialProps (ctx) {
return await Document.getInitialProps(ctx)
}
render () {
return (
<html>
<Head>
<title>Site Title</title>
<link href="/static/stylesheets/styles.css" rel="stylesheet" />
<link href="/static/stylesheets/prism.css" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
<script src="/static/scripts/prism.js"></script>
</body>
</html>
)
}
}
@m2git
Copy link

m2git commented Aug 13, 2018

If there is & in the JS src then it converts to & amp; in the generated HTML. Is there any solution for it?

@reemaparakh
Copy link

reemaparakh commented Apr 18, 2019

I tried using the above custom _document.js file to load <script> tag in my nextjs application. But it is not working, I get an error in console saying:

Uncaught ReferenceError: $ is not defined
    at script.js:1

Also where should I put meta tags so that I could generate dynamic meta tags for SEO?
Should I put my css files in _document.js or in my Layout component?

@amirhoseinsalehi
Copy link

I tried using the above custom _document.js file to load <script> tag in my nextjs application. But it is not working, I get an error in console saying:

Uncaught ReferenceError: $ is not defined
    at script.js:1

Also where should I put meta tags so that I could generate dynamic meta tags for SEO?
Should I put my css files in _document.js or in my Layout component?

Do you have load JQuery before your script?!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment