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.
So I am building my first project in Next JS while using Directus for my backend. I want the site to be 100% static. I am about 80% done when I discover that I cannot pass a query and getStaticProps in the _app.js or any non page component. Well this is a problem because I need my nav(s) as well as business logos and business information to be editable from the cms. Had I known this from the start I would have chosen a different technology but I am in too deep to get out now. I am shocke to learn that we are at version 13 and that this hasn't already been dealt with long ago so I am hoping someone out there has a solution.