Работа с Next

Раздел описывает варианты и нюансы подключения библиотеки в рамках работы с NextJs.

RSC - React Server Components (App router)

Библиотека поддерживает работу с RSC только при явном использовании директивы 'use client'.

'use client'

import { Button } from '@salutejs/plasma-giga';

...

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

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

Styled Components

info

Прежде всего убедитесь, что у вас правильно настроена работа со Styled Components.

Для справки: официальный пример работающей реализации.

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

const PlasmaTheme = createGlobalStyle(plasma_giga__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_giga__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-giga/styled-components'

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

Пример с CSS

tip

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

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

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

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

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