С пояснением кода
Сегодня я поделюсь с вами, как правильно связать Next.js с Material UI.
Если вам нравится смотреть, как я это делаю на видео, вы можете посмотреть это видео.
Прежде всего, давайте создадим проект Next.js, используя приведенные ниже команды.
npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript
Зайдите в свой следующий проект и установите Material UI.
yarn add @mui/material @emotion/react @emotion/styled #Or npm install @mui/material @emotion/react @emotion/styled
Кроме того, нам нужно добавить @emotion/server, который будет использоваться в последней части.
yarn add @emotion/server
Вы можете присоединиться к моему каналу YouTube Культ фрилансеров, где я рассказываю о реальных руководствах по разработке полного стека
Далее мы должны обновить наш файл _app.tsx и файлы _Document.tsx.
Что это за файлы
В Next.js _app.tsx и _document.tsx являются важными компонентами для создания веб-приложений, но они служат разным целям. Вот подробное объяснение для нового веб-разработчика:
_app.tsx: это корневой компонент вашего приложения Next.js. Он действует как оболочка для всех компонентов вашей страницы и предоставляет способ совместного использования данных, стилей и логики на всех ваших страницах.
Например, вы можете использовать файл _app.tsx для определения глобального заголовка, который должен отображаться на каждой странице вашего сайта. Вы также можете использовать его для инициализации состояния, которое вы хотите сделать доступным во всем приложении. Файл _app.tsx отображается только на стороне клиента, поэтому любой код, который вы поместите в него, будет работать только в браузере.
_document.tsx: файл_document.tsxотвечает за отрисовку начального HTML для каждой страницы вашего приложения Next.js. Этот файл выполняется на стороне сервера и генерирует HTML-код, который будет отправлен в браузер, когда пользователь посещает страницу.
Например, если вы хотите добавить на свои страницы метаданные, такие как тег заголовка или описание, вы можете сделать это в файле _document.tsx. Он также используется для определения базовой структуры вашей страницы, такой как теги заголовка и тела. Файл _document.tsx выполняется только один раз для каждой страницы, поэтому это хорошее место для размещения кода, который вы хотите запускать только один раз при загрузке страницы.
Таким образом, _app.tsx предназначен для кода на стороне клиента, который должен быть общим для всех страниц, а _document.tsx — для кода на стороне сервера, который генерирует начальный HTML для каждой страницы. Оба файла являются важными компонентами приложения Next.js, и они работают вместе, чтобы обеспечить согласованное взаимодействие с пользователем и инициализировать состояние вашего приложения.
При подключении Material UI к next вы должны обновить файлы _app.tsx и _document.tsx. А также вы должны правильно добавить файл темы.
Ниже приведено подробное объяснение кода шаблона, доступного в официальном репозитории MUI.
Давайте добавим этот theme.ts файл внутрьsrcпапки. Давайте поговорим о тематике материального проекта пользовательского интерфейса в следующей статье.
создайте файл createEmotionCache.tsx внутри папки src добавьте этот код.
Приведенный выше код добавляет точку вставки для внедрения стилей MUI. Вставка стилей производится в файле _app.tsx.
Создайте _app.tsx внутри папки pages и вставьте приведенный ниже код.
Внутри файла _app.tsx мы планируем загрузить стили MUI поверх нашего приложения. Мы делаем это, внедряя материальные стили пользовательского интерфейса в начало тега <Head> нашего приложения. Мы создаем insertionPoint в шапке приложения и вставляем туда стили (строка 21). Поскольку остальные стили загружаются после стилей MUI, это позволяет разработчикам легко переопределять стили MUI с помощью других решений для стилей, таких как модули CSS.
Приведенный выше компонент app возвращает jsx с глобальными стилями, метаинформацией и темой для приложения. Мы импортировали CacheProvider из emotion/react и вставили в наше приложение в строке 21. Компонент CacheProvider со значением emotionCache используется для предоставления кэша компонентам Emotion в приложении. Компонент CssBaseline устанавливает базовую линию для стилей и удаляет поля всех браузеров.
Создайте _document.tsx внутри папки pages и вставьте приведенный ниже код.
Внутри метода рендеринга в строке 8 file возвращает измененный HTML-файл путем внедрения темы, а также emotionStyleTags.. Мы обсудим, как эти emotionStyleTags генерируются внутри getInitialProps, в последней части статьи.
<Main/> и <NextScript/> импортируются из фреймворка next.js и используются для создания серверных реагирующих приложений.
Main — это компонент, представляющий основное содержимое вашего приложения. Обычно он используется для рендеринга основной части ваших страниц и компонентов, и это то, что передается вашему пользовательскому компоненту _document.
NextScript — это компонент, который отвечает за отображение тегов <script>, необходимых для правильной работы вашего приложения Next.js. Сюда входят файлы JavaScript, которые необходимы для гидратации вашего HTML-кода, отображаемого на сервере, а также любые другие сценарии, которые вы могли добавить в свое приложение.
MyDocument.getInitialProps асинхронная функция выполняет ряд действий, чтобы сделать рендеринг следующего приложения на стороне сервера максимально быстрым.
В приведенном выше коде, начиная со строки 71, он изменяет renderpage method объекта ctx.
Метод renderPage используется для рендеринга страницы на сервере и возврата результирующего HTML для отправки клиенту. В этом коде ctx.renderPage переназначается новой анонимной функции, которая возвращает результат вызова originalRenderPage с объектом параметров.
Объект параметров, переданный в originalRenderPage, имеет единственное свойство, enhanceApp, которое является компонентом более высокого порядка (HOC), обертывающим компонент App. Целью HOC является добавление свойства emotionCache к свойствам компонента App, которое содержит экземпляр кэша эмоций, созданный в MyDocument.getInitialProps.
Причина добавления кеша Emotion в свойства компонента App состоит в том, чтобы разрешить совместное использование одного и того же кеша несколькими запросами на стороне сервера. Это помогает повысить производительность за счет повторного использования одного и того же кеша вместо создания нового для каждого запроса.
Когда originalRenderPage вызывается с HOC enhanceApp, он возвращает HTML для страницы с компонентом App, обернутым HOC. Затем этот HTML-код можно отправить клиенту в качестве ответа на первоначальный запрос.
Затем измененный контекст (ctx) передается методу getInitialProps объекта Document в строке 84.
в строке 87 MyDocument.getInitialPropsmethod извлекает важные стили с помощью extractCriticalToChunks, что помогает оптимизировать производительность рендеринга на стороне сервера. Извлеченные стили добавляются к исходным свойствам как emotionStyleTags, которые отображаются в начале каждой страницы в строке 28.
Извлечь критические фрагменты
`extractCriticalToChunks — это метод из библиотеки CSS-in-JS Emotion. Он используется для извлечения важных стилей, необходимых для рендеринга на стороне сервера (SSR), и объединения их в отдельные фрагменты. Это помогает повысить производительность SSR за счет уменьшения объема данных, которые необходимо передавать и анализировать при каждом запросе.
Когда вызывается extractCriticalToChunks, он берет HTML-код, сгенерированный на сервере, и извлекает стили, необходимые для правильного рендеринга исходного вида. Затем эти стили добавляются на страницу в виде отдельных фрагментов, что позволяет браузеру загружать и применять их как можно быстрее.
Объединяя важные стили в отдельные фрагменты, extractCriticalToChunks может сократить время до первой отрисовки для приложений SSR, благодаря чему начальное представление отображается для пользователей быстрее.
Надеюсь, вы, ребята, получили четкое объяснение кода, который вы добавили в проект. Вы можете посмотреть официальный шаблон кода здесь
Если вы хотите поддержать меня как писателя, рассмотрите возможность подписки стать участником Medium. Всего 5 долларов в месяц, и вы получаете неограниченный доступ к Medium.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
