В гонке за создание лучшего веб-приложения и создание чего-то уникального я представляю вам еще одну комбинацию, с которой вы могли бы работать.

Стилизованные компоненты - один из популярных подходов, которые мы используем, если нам не нужны какие-либо компоненты CSS. Это очень мощная и удобная библиотека, которая будет создавать повторно используемые компоненты дизайна, включая управление вашей темой.

Если вы не слышали о стилизованных компонентах, я настоятельно рекомендую вам просмотреть эту ссылку, чтобы изучить их.

Next.js

Next.js - это мощная и популярная сборка SSR поверх React. Это дает вам более точный контроль над веб-сайтом, включая матрицы производительности и SEO. Узнать о Next.js можно на официальных сайтах.

Я очень рекомендую вам прочитать о Next.js, он может стать одним из самых популярных фреймворков.

Стилизованные компоненты

низкоуровневое оформление компонента с использованием возможностей JavaScript и CSS делает эту утилиту великолепной. Это немаркированный литерал стилей компонента, который можно очень легко использовать повторно.

Динамическое оформление, безболезненное обслуживание, отсутствие головной боли с именами классов и легкое изменение CSS - вот лишь несколько важных моментов для этой утилиты.

Как вообще его использовать?

Чтобы использовать эту комбинацию, вам сначала понадобится проект Next.js, он может быть уже на картинке или вы можете создать новый проект.

для этой статьи я использую начальный материал Next.js, вы можете выбрать любой шаблон или проект по вашему выбору.

Идея в том, что сначала мы установим все зависимости, а затем создадим компонент и повторно используем его на главной странице. После этого мы создадим тему и будем использовать ее для всего проекта.

Давайте начнем

Установите зависимости

Сначала нам нужно установить в проект стилизованный компонент. Вы можете открыть терминал и написать любую из команд

# with npm
npm install --save styled-components
# with yarn
yarn add styled-components

Конфигурации Babel

В React это сразу начинается, но затем вы хотите сделать еще один шаг, чтобы настроить SSR для компонентов.

Для этого создайте файл .babelrc и поместите в него указанное ниже.

{
   "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

Этот фрагмент кода гарантирует, что у вас будет настроена серверная

Определить стиль

Теперь давайте определим стили для ваших компонентов. Сначала мы создадим папку с именем style и создадим файл theme.config.js.

Глобальный CSS

Давайте определим глобальный стиль для всего нашего приложения. Для этого давайте импортируем несколько вещей из styled-components

import { createGlobalStyle } from 'styled-components'

export const lightTheme = {
   body: '#fffff',
   main: '#5C14DB',
   mainColor: '#FFFFFF',
   accent: '#E5DE17',
   accentColor: '#161616',
   secondary: '#FFFFFF',
   secondaryColor: '#343434',
   dullColor: '#343434',
   ternary: '#000000',
   codeColor: '#D121C5',
}
export const GlobalStyles = createGlobalStyle`
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   background: ${({ theme }) => theme.body};
   color: ${({ theme }) => theme.text};
   font-family: sans-serif !important;
   font-weight: 400;
   font-style: normal;
   transition: all 0.50s linear;
}
input, textarea, button {font-family: inherit}

Здесь мы импортируем createGlobalStyle, который поможет нам создать глобальный CSS для проекта. Под ним находится простой код CSS.

Чтобы импортировать этот глобальный стиль, нам нужен файл с именем _app.js

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

Теперь, если вы запустите проект и увидите изменения, он должен выбрать глобальный стиль из файла theme.config.js.

Если вы измените что-либо в конфигурации темы, это должно отражать всю вашу страницу

Компонент CSS

Давайте продолжим и создадим стиль для конкретных компонентов. Чтобы создать стартовый компонент, вы можете создать файл в папке стилей с именем layout.style.js.

import styled from 'styled-components'
export const PrimaryContainer = styled.div`
   background: ${(props) => props.theme.main};
   color: ${(props) => props.theme.mainColor};
   display: flex;
   flex-direction: column;
`

Вот пример компонента контейнера, который можно использовать в любом приложении. Вы можете импортировать это только как обычный компонент

Передача пользовательского реквизита

Передать кастомный реквизит не так уж и сложно. Вам просто нужно свойство attrs для вашего стилизованного компонента.

Одним из примеров может быть

export const Row = styled.div.attrs((props) => {
   const direction = props.mobile ? 'column' : 'row'
   const justifyContent = props.justifyContent ?? 'start'
   const alignItems = props.alignItems ?? 'start'
   const reverse = props.reverse
   return {
     direction: `${direction + (reverse ? '-reverse' : '')}`,
     justifyContent,
     alignItems,
   }
 })`
 display: flex;
 flex-direction: ${(props) => props.direction};
 justify-content: ${(props) => props.justifyContent};
 align-items: ${(props) => props.alignItems};
`

Чтобы использовать это, вы можете написать

<Row justifyContent='center' alignItems='center' reverse mobile/>

Заключение

Это простое руководство по сочетанию стилизованного компонента и Next.js. Это более или менее похоже на реакцию с некоторыми дополнительными строками кода.

Я бы порекомендовал вам попробовать это и надеюсь, что эта статья поможет вам в настройке. Вы можете найти весь исходный код здесь. Это репо содержит больше примеров различных типов, которые помогут вам понять больше. Спасибо!