CODEWITHSUNDEEP
javascriptreactjsnext.js
Satindar31
Satindar31

Reputation: 358

How to import external JS file in Next.js 12

I need to import a local JS file in my Next.js project. While using:

<Script type="text/javascript" src="/js.js"></Script>

I get the error:

404 Not Found

When using the script tag.

<script type="text/javascript" src="/js.js"></script>

I get the error "Synchronous scripts should not be used."

Looking at the documentation and a question here, they say to put static files in the public directory. Doing that gives the same errors as shown above. Am I doing something wrong while importing or is there some other way to import these in Next.js?

Upvotes: 1

Views: 1800

Answers (2)

Satindar31
Satindar31

Reputation: 358

The simple fix is to use the <Script> tag provided by Next.JS in the following manor:

<Script id="something to identify this">
{`Put your JS between these backticks`}
</Script>

Upvotes: 1

Bawantha Rathnayaka
Bawantha Rathnayaka

Reputation: 170

use async or defer. next js documentation - https://nextjs.org/docs/messages/no-sync-scripts

<script src="/js.js" async />
<script src="/js.js" defer />

Upvotes: 1

Related Questions