ship-public-assets-with-a-nextjs-app.md

Ship Public Assets With A Next.js App

A Next.js project includes a top-level public directory. Anything in this directory at build time will be publicly available.

This is handy for things like a logo, cover image, or favicon.

If I create an images directory in public and then place an SVG in it:

$ ls public/images
logo.svg

Then I can reference that image in the HTML or JSX of my app pages, such as in a header.jsx component.

const Header = () => {
  <div>
    {/* a bunch of header and nav content */}
    <img className="logo" src="/images/logo.svg" />
  </div>
}

Notice it is publicly available at /images/logo.svg.

You can do this with other files as well. For instance, some kind of company brochure PDF could be placed in public and you could link to it as a download.

source