nextjs
  1. nextjs-metadata-files
PreviousNext

Next.js Metadata Files

Next.js allows you to define metadata for your pages using two different types of files - _app.js and _document.js. These files provide a way to add information to the head of your HTML documents that is not related to the content of the page itself.

Syntax

The syntax for defining metadata in Next.js varies depending on the type of file you are using. In both cases, you will be defining a Head component that will contain the metadata you want to add.

_app.js Metadata Syntax

import Head from 'next/head';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>My App</title>
        <meta name="description" content="My app description" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

_document.js Metadata Syntax

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Example

In this example, we will add a meta tag to the _document.js file to specify the language of the page.

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Output

The output of the above example will be an HTML document with the following lang attribute: lang="en". This will tell search engines and other tools that the language of the page is English.

Explanation

_app.js and _document.js files allow you to add metadata to your Next.js pages that is not related to the content of the page itself. This metadata can include things like the page title, description, and language.

Use

You can use _app.js and _document.js files to add metadata to your Next.js pages that is not related to the content of the page itself. This metadata can be used for search engine optimization (SEO), accessibility, and other purposes.

Important Points

  • Metadata files in Next.js allow you to add information to the head of your HTML documents that is not related to the content of the page itself.

  • _app.js and _document.js files are the two types of metadata files available in Next.js.

  • Metadata files can be used for a variety of purposes, including search engine optimization (SEO), accessibility, and other purposes.

Summary

Metadata files in Next.js allow you to add information to the head of your HTML documents that is not related to the content of the page itself. This metadata can include things like the page title, description, and language. You can use metadata files for search engine optimization (SEO), accessibility, and other purposes. There are two types of metadata file available in Next.js - _app.js and _document.js.

next.config.js OptionsFunctions
Published on: