First, let’s talk about how Next.js handles static assets such as images.
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 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?