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
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.
public directory is also useful for
robots.txt, Google Site Verification, and any other static assets. Check out the static file serving documentation to learn more.