Assets and Metadata

Learn how to add and use assets in our applications and add metadata to a page.

We'll cover the following

Assets

Assets typically comprise images, logos, fonts, etc., that are required in a web application. The same is the case with Next.js. The first thing to know about assets in a Next.js application is where they’re saved. All static assets of a Next.js application go inside the /public folder.

The /public folder

Static assets can be served from the /public folder because it’s a top-level directory at the root of our application and can be referenced from the rest of the application. We can save images, font files, and all other static assets in this folder. Now that we know where the assets are saved, let’s learn how to use the Image component that comes with Next.js to display images.

Using images in an application

The Image component is imported from next/image and is an extension of the <img /> element of HTML. The Image component of Next.js is designed and developed to be optimized over the standard <img /> tag of HTML. Let’s see how we can use the component in our code:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}
Using the Image component from next/image

In the code widget above, we’re using a local image. However, what will happen if we try to use an image from the web or an API? Next.js has added a security step where the domains of the external sources of assets need to be defined in the next.config.js file before the assets can be used. To add allowed domains, we need to change the next.config.js file so it looks like this:

Press + to interact
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  
  images: {
    domains: ['www.domain-name1.com', 'www.domain-name2.com']
  }
}
module.exports = nextConfig

Metadata

The metadata of a web page consists of its title and meta description. This is useful for SEO because it tells the search engine if the page’s content is relevant to a search. Next.js provides us with the <Head> tag that can be used to add the metadata of each page because we can’t use the standard <head> tag that HTML provides with React. Let’s briefly discuss the two items of metadata that we’ll be using the most:

  • Title: We use this tag to add the title of our web page. The title is also displayed on the browser tab for the user to identify what’s open. By default, the title is the URL of the page.

  • Meta: The page’s metadata—for example, the description—is part of the page’s header and is responsible for helping search engines find relevant pages according to the search requirements.

Let’s take a look at how we can add metadata items to our Next.js applications using the <Head> component: 

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}
Using the <Head> tag from next/head

If we open the output in a new tab, we can see that the title of the page is now Home Page. To see the description, we need to inspect the page elements. Inside the <head> tag of the page HTML, we can see that the description of the page has also been added.