Strapi+Next

Чтобы интегрировать макеты, свёрстанные на Next.js, с CMS Strapi, тебе нужно выполнить несколько шагов для соединения двух систем. Это позволит получать и отображать данные, управляемые в Strapi, на клиентской стороне в Next.js. Вот инструкция по интеграции:

### Шаги:

#### 1. **Установить Strapi**
- Если у тебя еще нет Strapi, тебе нужно установить его. Для этого перейди в рабочую директорию и запусти команду:

```bash
npx create-strapi-app my-project --quickstart
```

Это создаст проект Strapi с базовыми настройками. Запусти сервер Strapi и настрои панель администратора для управления контентом.

#### 2. **Настроить API в Strapi**
- Strapi по умолчанию предоставляет REST API, но ты можешь использовать и GraphQL, установив соответствующий плагин. Например, для GraphQL:

```bash
npm install @strapi/plugin-graphql
```

- Создай нужные коллекции и записи в Strapi для данных, которые будут отображаться в твоих макетах (например, для блогов, товаров и т. д.).
- Убедись, что данные публикуются, чтобы API мог их отдать (в панеле Strapi нужно переключить записи в состояние "published").

#### 3. **Получить данные из API в Next.js**
- В твоем проекте на Next.js, тебе нужно использовать API запросы для получения данных с помощью встроенных методов Next.js, таких как `getStaticProps`, `getServerSideProps` или непосредственно через компонент.

- Например, можно использовать `getStaticProps` для получения данных при сборке страницы:

```javascript
export async function getStaticProps() {
const res = await fetch('http://localhost:1337/api/your-content');
const data = await res.json();

return {
props: {
data,
},
};
}

function Page({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}

export default Page;
```

- Это пример использования REST API. Если ты предпочитаешь GraphQL, вместо fetch можешь использовать клиент GraphQL (например, Apollo).

#### 4. **Интеграция с компонентами Next.js**
- Теперь, когда ты получаешь данные с сервера Strapi, ты можешь интегрировать их с компонентами, которые уже сверстаны на Next.js.
- Например, если у тебя есть компонент для отображения статьи, ты можешь прокинуть в него данные из Strapi и использовать их в JSX.

```jsx
const Article = ({ title, content }) => (
<div>
<h1>{title}</h1>
<p>{content}</p>
</div>
);

export default Article;
```

А в странице можно передать данные в этот компонент:

```jsx
<Article title={data.title} content={data.content} />
```

#### 5. **Управление состоянием и UI в Next.js**
- В зависимости от того, как часто меняются данные, ты можешь использовать:
- `getStaticProps` для статичных страниц (с пересборкой при обновлении).
- `getServerSideProps` для динамического рендеринга на сервере.
- или обрабатывать запросы к API на клиентской стороне через `useEffect` для максимально интерактивных страниц.

#### 6. **Авторизация и права доступа**
- Strapi может иметь защиту для API (например, через JWT-токены или API ключи). Тебе нужно настроить соответствующую авторизацию на стороне Next.js, если API закрыт.
- Если данные публичны, отключи защиту в настройках публичных прав (Roles and Permissions).

### Пример с использованием GraphQL:

```javascript
import { gql } from "@apollo/client";
import client from "../apollo-client";

export async function getStaticProps() {
const { data } = await client.query({
query: gql`
query {
articles {
title
content
}
}
`,
});

return {
props: {
articles: data.articles,
},
};
}

function Page({ articles }) {
return (
<div>
{articles.map((article, index) => (
<div key={index}>
<h1>{article.title}</h1>
<p>{article.content}</p>
</div>
))}
</div>
);
}

export default Page;
```

Это позволяет получить данные из Strapi через GraphQL и интегрировать их в Next.js.

---

### Основные шаги:
1. Установи и настрой Strapi для управления контентом.
2. Подключись к API Strapi из Next.js.
3. Интегрируй данные с макетами и компонентами Next.js.
4. Настрой авторизацию для API, если это необходимо.

Таким образом, ты сможешь динамически управлять содержимым своего Next.js сайта через Strapi.