Next.JS implement external ".js" with <script>

Question

Im Building a website with Next.Js and I tried to implement an external .js file (Bootstrap.min.js & Popper.min.js) but it is not displayed. Im not sure what the problem is!

I implemented it like this:

import Head from 'next/head';

//partials
import Nav from './nav'

const Layout = (props) => (
<div>
    <Head>
        <title>Site</title>

        {/* Meta tags */}
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>
        
        {/* Standard page css */}
        <link rel="stylesheet" type="text/css" href="/static/css/page.css"/>
        
        {/* Bootstrap CSS */}
        <link rel="stylesheet" href="/static/includes/bootstrap.min.css"/>

        {/* jQuery first, then Popper.js, then Bootstrap JS */}
        <script src="/static/includes/popper.min.js"></script>
        <script type="text/javascript" src="/static/includes/bootstrap.min.js"></script>
        
    </Head>
    <Nav/>
    {props.children}
</div>
);

export default Layout;

It looks good to me? what am I missing, it's not projecting as it should!

When I tried a script inside the page it shows "Hello JavaScript" for a very short time and then it disappears?

<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "Hello JavaScript";</script>

How do i fix it?

Please help!

Im Using: "next": "^8.0.3", "react": "^16.8.4", "react-dom": "^16.8.4"

Hello, please how did you solve this ?

Stanly Medjo
– Stanly Medjo

2020-03-24 17:10:48 +00:00
Commented Mar 24, 2020 at 17:10 — Stanly Medjo
– Stanly Medjo, Commented Mar 24, 2020 at 17:10

GunnerFan · Accepted Answer · 2020-10-08 11:41:47Z

19

You need to put all your scripts inside the Head tag.
Don't put raw javascript inside the Head tag. Put it in a separate file and import the script in the Head tag

You can create a .js file, which contains your raw js code, in the public folder and then use the script in the Head tag. I am not sure why we have to do this, but this is how it works in Next.js

So for your problem, this will work:

public/js/myscript.js

document.getElementById("demo").innerHTML = "Hello JavaScript";

Layout.js

import Head from 'next/head';

const Layout = (props) => (
<div>
    <Head>
        {/* import external javascript */}
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
</div>
);

export default Layout;

edited Oct 8, 2020 at 11:41

answered May 17, 2020 at 8:01

GunnerFan

4,1273 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tejas Shetty · Accepted Answer · 2021-08-13 07:46:56Z

15

You can use Script tag from next/script for importing external .js files.

The following is an example snippet from one of my projects. I had to import the script at the end of the page due to some DOM manipulations so the Script tag worked exceptionally well :)

import Script from "next/script";
import Content from "../components/Content";
import Header from "../components/Header";

const index = () => {
  return (
    <div>
      <Header />
      <Content />
      <Script type="text/javascript" src="./assets/js/main.js" />
    </div>
  );
};

export default index;

answered Aug 13, 2021 at 7:46

Tejas Shetty

1922 silver badges10 bronze badges

2 Comments

jonathancardoso Over a year ago

Only available with Next.js >= 11

Jayna Tanawala Over a year ago

Not working with dangerouslySetInnerHTML. I am applying string in it but didn't work

saravanakumar · Accepted Answer · 2019-11-09 09:09:04Z

5

This is working as Expected for me.

<script
dangerouslySetInnerHTML={{
  __html: `
  console.log('Console message');
`,
}}
/>

answered Nov 9, 2019 at 9:09

saravanakumar

1431 gold badge2 silver badges5 bronze badges

1 Comment

user2465896 Over a year ago

This approach is recommended by a Next.js engineer here: github.com/vercel/next.js/issues/8891#issuecomment-536192888 Hi, it looks like you need to use dangerouslySetInnerHTML here since React escapes the characters by default

Ramakay · Accepted Answer · 2020-06-15 13:45:40Z

2

@GunnerFan was in the right path. NextJS recommends putting these files in the public folder

So

import Head from "next/head";

// ... elsewhere in your code 
<HEAD>
        <script type="text/javascript" src="js/myscript.js"></script>
</HEAD>

You can refer to files in the folder directly, e.g: js/<your file> Be careful not to name them same as files in the pages directory, i.e INCORRECT: pages/myscript.js & js/myscript.js

Ref: https://nextjs.org/docs/basic-features/static-file-serving

answered Jun 15, 2020 at 13:45

Ramakay

3,1631 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

Next.JS implement external ".js" with <script>

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related