website/sdds-serv-docs/docs/next.mdx - dev - sdds/plasma

website/sdds-serv-docs/docs/next.mdx
120 строк3 KB
Alexander Lobyntsev
docs(sdds-serv): update next section
27 авг 2025, 07:18
27 авг 2025, 07:1819b4087
---
id: next
title: Работа с Next
---
Раздел описывает варианты и нюансы подключения библиотеки в рамках работы с `NextJs`.

:::caution RSC - React Server Components (App router)
<p>Библиотека поддерживает работу с **RSC** только при **явном использовании** директивы **'use client'**.</p>

```ts
'use client'

import { Button } from '@salutejs/sdds-serv';

...
```
:::

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

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

### Styled Components

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

    Для справки: официальный [пример](https://github.com/vercel/next.js/tree/main/examples/with-styled-components) работающей реализации.
:::

```tsx
import type { AppProps } from "next/app";
import { sdds_serv__light } from '@salutejs/sdds-themes';
import { createGlobalStyle } from "styled-components";

const PlasmaTheme = createGlobalStyle(sdds_serv__light);

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

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

### Импорт CSS

```tsx
import type { AppProps } from "next/app";
import '@salutejs/sdds-themes/css/sdds_serv__light.css';

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

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

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

### Пример со Styled Components

```jsx
import React from 'react';
import { Button } from '@salutejs/sdds-serv/styled-components'

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

### Пример с Emotion

```jsx
import React from 'react';
import { Button } from '@salutejs/sdds-serv/emotion'

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

### Пример с CSS

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

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

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

```jsx
import React from 'react';
import { Button } from '@salutejs/sdds-serv'

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