Как редактировать головной тег в Next.js

Хотите добавить некоторые теги ссылки или скрипта в голове? В этом посте я собираюсь показать, как редактировать содержание головного тега.

В next.js мы можем сделать это, переопределяя по умолчанию Документ ;

Создайте файл Страницы/_document.js и продлить Документ сорт.

В методе Render мы возвращаем фактическую структуру всего дерева приложения. Не кладите UI или бизнес-логику здесь.

В этом примерах между тегом головки я поместил теги ссылки в фоновые шрифты Google.

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      
        
          
          
        
        
          

          
        
      
    );
  }
}

Вот и все!

Оригинал: “https://dev.to/adambaialiev/how-to-edit-the-head-tag-in-next-js-2f39”