Adding media content – images, video, and audio

Generally speaking, it's better to refer to images from CSS so that the entire presentation layer is configured in one place. It's usually a red flag when you want to insert an image in a JS component. We're not talking about image URLs coming from API responses; those are always inserted dynamically.

In this case, you should just refer to an image as you normally do. Next.js and Webpack will take care of this, and if the image is small enough, will even Base64-encode it and put it inline in CSS.

As a quick reference, let's add an icon to a Nav component:

// components/Nav.css
.logo-css {
background: url(/static/js.jpg) no-repeat center center;
background-size: cover;
}
.logo {
background: url(/static/js.jpg) no-repeat center center;
background-size: cover;
}

We must place the image in the static folder, otherwise it will not work via regular CSS.

Now, let's add a span to the Nav component:

// components/Nav.js
export default () => (
<nav&gt...