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

website/sdds-cs-docs/docs/next.mdx
90 строк3 KB
Dima Shugaev
feat(docs): add page guide for next.js
05 фев 2025, 14:09
05 фев 2025, 14:0904331f1
---
id: next
title: Работа с Next
sidebar_position: 1
---

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

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

<br />

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

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

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

### Styled Components

<blockquote>
    Прежде всего убедитесь, что у вас правильно настроена работа со Styled Components. Для справки: официальный [пример](https://github.com/vercel/next.js/tree/main/examples/with-styled-components) работающей реализации.
</blockquote>

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

const PlasmaTheme = createGlobalStyle(sdds_cs__light);

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

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

### Импорт CSS

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

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

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

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

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

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

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

### Пример с Emotion

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

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