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

website/sdds-scan-docs/docs/next.mdx
105 строк3 KB
Alexander Lobyntsev
chore(sdds-scan-docs): init package
28 май 2025, 12:34
28 май 2025, 12:3447f57c7
---
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-scan';

...
```
:::

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

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

### 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_scan__light } from '@salutejs/sdds-themes';
import { createGlobalStyle } from "styled-components";

const PlasmaTheme = createGlobalStyle(sdds_scan__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_scan__dark.css';

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

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

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

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

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

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-scan', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons']
};
````

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

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

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