Как использовать стилизованные компоненты в Next.js 13

И на стороне сервера визуализировать его с помощью маршрутизатора приложений.

Подсказка: эта статья предназначена для проектов Next.js, использующих маршрутизатор приложений. Ознакомьтесь с этой статьей для styled-components with the pages router.

styled-components — это библиотека CSS-in-JS для React, которую можно использовать и в Next.js. Используя его в vanilla React, исполняемый JavaScript создает стили CSS для элементов DOM.

Для Next.js есть два варианта: использование его «обычным» способом и рендеринг на стороне сервера. Мы рассмотрим оба, и вы узнаете, как правильно использовать стилизованные компоненты в Next.js.

Начало работы со стилизованными компонентами в Next

Если у вас нет настроенного проекта Next.js, вы можете создать его, используя следующее: yarn create next-app.

Затем установите стилизованные компоненты, используя yarn add styled-components.

Давайте создадим стилизованный компонент и отрендерим его.

'use client'
import styled from "styled-components"


const Heading = styled.h1`
  color: red;
  font-size: 50px;
  font-family: "Arial";
`;

export default function Home() {
  return (    
    <Heading>Hello world</Heading>
  )
}

Когда вы запустите его, вы должны увидеть красный заголовок.

Вот и все — styled-components работает в вашем приложении Next.js, и вы можете использовать его вот так.

Тем не менее, одна вещь, которую следует упомянуть: это еще не рендеринг на стороне сервера.

В собранном исходном коде наш компонент выглядит так:

<h1 class="sc-bczSft ehCyHd">Hello world</h1>

Нашему элементу предоставлен класс, но CSS не определен. Ни один загруженный файл или тег ‹style› не содержат стили наших элементов. Под капотом исполняемый JavaScript устанавливает стили для нашего компонента во время выполнения.

По этой причине стиль не применяется мгновенно. В идеале мы хотим избежать таких мерцаний, чтобы не повредить UX нашего приложения. Давайте исправим это.

Стилизованные компоненты рендеринга на стороне сервера

Во-первых, нам нужно создать вспомогательный файл, который превращает наш CSS-in-JS в CSS, который можно внедрить в заголовок нашего документа. Соглашение состоит в том, чтобы назвать этот файл…