How to host static js files with NextJS

Question

I am trying to host static js and css files with NextJS.

What I have done so far is that I have created a react app using create-react-app, created an App component, then run the npm run build command, upon which a few static js and css files were created. I then hosted those files using firebase hosting, such that these static js and css files could be accessed from a plain index.html file. By doing this, I was able to embed react components into a plain .html file using a script tag, a link tag and a div. All i needed was for the link tag to source the static css file hosted by firebase and the script tag to source the static js file hosted by firebase.

What I want to do however, is to take these two static files that were "imported" via the script and link tags and host them in a different project, where I have all my other code. I want to add them to a next.js project and host them with the help of firebase. What I have tried is to add the static files I want to have hosted into the _next folder and then hosted the project.

I cannot find the static files however and I certainly cannot access them via script or link tags. Any ideas on how I should host these static js and css files?

user_19302546 · Answer

Here is a method utilize a cloud delivery network and just use the html tags and include the src if you have just 1 or 2 static files

Here is the CDN i utilize its open source and free :D https://cloudinary.com/

and for your case https://nextjs.org/docs/api-reference/next/image

import Image from 'next/image';

Or

import Image from 'next/image';

//Example for an Image inside a project dir

How to host static js files with NextJS

1 Answers