如何使用 NextJS 托管 static js 文件

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?

Answer 1

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"/>