Работа с Next

Подключение библиотеки и ее компонентов не отличается от стандартного варианта, за исключением некоторых нюансов, о которых ниже.

caution

Библиотека не поддерживает работу с React Server Components (App router). За исключением тех мест в вашем проекте, где явно задана директива 'use client'.

В дальнейшем речь пойдет исключительно для pages router'a, вне зависимости от версии Next.

Подключение тем

Ниже представлены различные способы подключения темы в проект:

Styled Components

Прежде всего убедитесь, что у вас правильно настроена работа со Styled Components. Для справки: официальный пример работающей реализации.

import type { AppProps } from "next/app";
import { plasma_web__light } from '@salutejs/plasma-themes';
import { createGlobalStyle } from "styled-components";

const PlasmaTheme = createGlobalStyle(plasma_web__light);

export default function App({ Component, pageProps }: AppProps) {
  return (
      <>
        <PlasmaTheme />

        <Component {...pageProps} />
      </>
  );
}

Импорт CSS

import type { AppProps } from "next/app";
import '@salutejs/plasma-themes/css/plasma_web__dark.css';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Работа с компонентами

Библиотека поставляет компоненты в формате Styled Components и на обычном CSS.

Пример со Styled Components

import React from 'react';
import { Button } from '@salutejs/plasma-web'

export default function Home() {
  return (
    <div>
        <Button>Button</Button>
    </div>
  );
}

Пример с CSS

caution

Next не разрешает импорт CSS из сторонних модулей, поэтому важно не забыть добавить наши библиотеки в next.config.js следующим образом:

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@salutejs/plasma-web', '@salutejs/plasma-new-hope']
};

И далее уже можно подключать наши компоненты:

import React from 'react';
import { Button } from '@salutejs/plasma-web/css'

export default function Home() {
  return (
    <div>
        <Button>Button</Button>
    </div>
  );
}