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"
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;
Head
tag.Head
tag. Put it in a separate file and import the script in the Head
tagYou 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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With