First, let’s talk about how Next.js handles static assets such as images.
Next.js can serve static files, like images, under the top-level public
directory. Files inside public
can be referenced from the root of the application similar to pages
.
If you open pages/index.js
in your application and take a look at the <footer>
, we refer to the logo image like so:
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
The logo image exists inside the public
directory at the top level of your application.
The public
directory is also useful for robots.txt
, Google Site Verification, and any other static assets. Check out the documentation for Static File Serving to learn more.
Quick Review: If you wanted to add a new asset /images/me.jpg
, what would the complete file path be?