Serve Static Assets in a Next.js Project
In Next.js, static assets can be added to a project by creating a public folder in the root of the project and placing the assets within.
Lazar Nikolov: [0:00] Aside from pages, there is another specialized folder called public. Next.js serves everything in the public folder statically starting from baseurl/. Let's open the exercise number four, and check out the index file.
[0:14] We can see on line six that we want to add the lazar.png image there. We can see that the lazar.png is at the root of the project. In order to serve it statically, we need to place it in the public folder. Let's create the public folder.
[0:30] All we need to do is drag lazar.png inside. Let's get back to the index.tsx folder, and add an image tag and set the source to /lazar.png. Ignore the warnings for now. Let's see what happens. We're going to run npm run dev and visit localhost:3000.
[0:52] There we go. We can see the image. The public folder is also useful for the robots.tsx, your favicons, the Google site verification, and any other static files including HTML files.