# contentful-nextjs

Подключает Contentful к существующему проекту Next.js: SDK, переменные окружения, клиенты для продакшена и превью, Draft Mode.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 333 установки · ★ 39
- Автор: contentful
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/contentful/skills/tree/HEAD/skills/contentful-nextjs/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/contentful-nextjs

## Что делает

Скилл ведёт агента по шагам: проверить структуру проекта, настроить переменные окружения, поставить и инициализировать `contentful`, реализовать выборку опубликованного контента, добавить поведение для Draft Mode и проверить всё минимальным тестовым маршрутом. Работает и с App Router, и с Pages Router. Если тип роутера не задан, скилл берёт App Router.

Нужны три переменные: `CONTENTFUL_SPACE_ID`, `CONTENTFUL_ACCESS_TOKEN` и `CONTENTFUL_PREVIEW_ACCESS_TOKEN` для превью. Оба токена выдаёт один API-ключ в настройках пространства. Если переменных нет, скилл просит добавить их в `.env.local` до продолжения. Для обычной выдачи используется CDA-хост, для Draft Mode — `preview.contentful.com` с превью-токеном.

Клиент советует держать в общем модуле, а в поле `environment` подставлять алиас вроде `master`, чтобы рантайм не зависел от ID релизного окружения. Про версии Next.js скилл не полагается на память: перед советом об апгрейде или обходном пути он сверяется с релизами на GitHub. Персонализация и Experiences SDK сюда не входят, для них есть отдельный скилл.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add contentful/skills --skill contentful-nextjs -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/contentful-nextjs/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/contentful-nextjs/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add contentful/skills --skill contentful-nextjs -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/contentful-nextjs/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add contentful/skills --skill contentful-nextjs -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/contentful-nextjs/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install contentful/skills contentful-nextjs
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/contentful-nextjs/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add contentful/skills --skill contentful-nextjs -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/contentful/skills --path skills/contentful-nextjs
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/contentful-nextjs/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add contentful/skills --skill contentful-nextjs -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/contentful/skills/tree/HEAD/skills/contentful-nextjs/SKILL.md

## Когда брать
- подключить Contentful к уже готовому проекту Next.js
- развести клиенты для опубликованного контента и для превью
- настроить Draft Mode и показ черновиков редактору
- выбрать между App Router и Pages Router при выборке записей
- убрать зависимость рантайма от ID релизного окружения через алиас

## Примеры запросов агенту
- настрой Contentful в этом Next.js проекте
- добавь превью через Draft Mode для Contentful
- сделай выборку записей Contentful в Server Components

## Похожие
- [sanity-best-practices](https://affpapa.org/nevibecode/skills/sanity-best-practices.md) — скилл · 31800 установок
- [payload](https://affpapa.org/nevibecode/skills/payload.md) — скилл · 6900 установок
- [clerk-nextjs-patterns](https://affpapa.org/nevibecode/skills/clerk-nextjs-patterns.md) — скилл · 53400 установок
- [nextjs-app-router-patterns](https://affpapa.org/nevibecode/skills/nextjs-app-router-patterns.md) — скилл · 32529 установок
- [nextjs-supabase-auth](https://affpapa.org/nevibecode/skills/sickn33-nextjs-supabase-auth.md) — скилл · 6600 установок
- [nextjs-cache-architecture](https://affpapa.org/nevibecode/skills/nextjs-cache-architecture.md) — скилл · 5000 установок

Из того же набора: [contentful/skills](https://affpapa.org/nevibecode/by/contentful/skills.md) — 5 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md