Поиск

ПоискПоиск

Объясните назначение файла _app.js и _document в Next.js?

Feb 06, 2025, 2 min read

В Next.js файлы _app.js и _document.js играют важную роль в настройке и управлении поведением вашего приложения. Давайте рассмотрим их назначение и использование более подробно.

_app.js

Файл _app.js является компонентом высшего порядка (Higher-Order Component, HOC) в Next.js, который оборачивает все страницы вашего приложения. Он позволяет вам контролировать, как каждая страница инициализируется и отображается. Вот некоторые ключевые функции и преимущества использования _app.js:

  1. Глобальные стили и компоненты: Вы можете импортировать глобальные стили или компоненты, которые будут применяться ко всем страницам вашего приложения.
  2. Сохранение состояния: Вы можете сохранять состояние между переходами по страницам, что полезно для таких вещей, как аутентификация или корзина покупок.
  3. Общие макеты: Вы можете определить общий макет, который будет отображаться на всех страницах, такой как шапка, подвал или боковая панель.
  4. Инициализация библиотек: Вы можете инициализировать сторонние библиотеки, которые должны быть доступны во всем приложении.

Пример _app.js:

import '../styles/globals.css';
import Layout from '../components/Layout';
 
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
 
export default MyApp;

_document.js

Файл _document.js используется для настройки HTML-документа, который оборачивает все страницы вашего приложения. Он позволяет вам контролировать элементы <html>, <head> и <body>, что полезно для добавления метаданных, глобальных скриптов или настройки языка. Вот некоторые ключевые функции и преимущества использования _document.js:

  1. Метаданные: Вы можете добавлять метатеги, такие как <meta>, <link>, <script>, которые будут применяться ко всем страницам.
  2. Глобальные скрипты: Вы можете добавлять глобальные скрипты, которые должны быть загружены на всех страницах, такие как Google Analytics или другие сторонние библиотеки.
  3. Настройка языка: Вы можете установить атрибуты языка для элемента <html>.

Пример _document.js:

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Файлы _app.js и _document.js предоставляют мощные возможности для настройки и управления поведением вашего Next.js приложения. Используя _app.js, вы можете управлять глобальными стилями, состоянием и макетами, в то время как _document.js позволяет вам настраивать HTML-документ и добавлять метаданные и глобальные скрипты.

Назад

Упоминания со ссылкой