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?
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/
<img
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/> and for your case https://nextjs.org/docs/api-reference/next/image
import Image from 'next/image';
<Image
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/
/>
Or
import Image from 'next/image';
//Example for an Image inside a project dir
<Image src="./public" />
<Image src="./src/assets/images"/>