Налаштування Sanity з Next.js, Nuxt та Remix

Повна інтеграція Sanity з сучасними React-фреймворками

При розробці на Next.js часто виникає проблема гідратації контенту з Sanity, а також необхідність реалізувати preview mode для редакторів. До того ж, без ISR кожна публікація вимагає повної перезбірки — це збільшує TTFB на 30–50%. Ми допоможемо налаштувати інтеграцію Sanity під ключ: з ISR, webhooks та типізацією. Наш досвід — 10+ проєктів, понад 5 років на ринку. Гарантія на роботу — 30 днів після деплою. Зв'яжіться, щоб отримати консультацію та оцінку вашого проєкту.

Sanity працює через HTTP API — будь-який фреймворк може читати контент. Офіційні бібліотеки: next-sanity для Next.js, @sanity/client для інших. Завдяки CDN Sanity Client відповідає в середньому за 50–80 мс, що в 2–3 рази швидше fetch-запитів до звичайного REST API. Офіційна документація Sanity

Переваги Sanity з серверними фреймворками

Sanity — headless CMS з реальним часом: редактори бачать зміни миттєво. У парі з Next.js або Nuxt ви отримуєте статичні сторінки, які оновлюються тільки при зміні контенту. Це знижує навантаження на сервер до 40% і покращує LCP. Крім того, GROQ-запити дозволяють вибирати тільки потрібні поля — обсяг переданих даних скорочується на 60–70%. Інтеграція Sanity з фреймворками зменшує витрати на хостинг.

Як підключити Sanity до Next.js через App Router

Встановіть пакети: npm install next-sanity @sanity/client. Налаштуйте клієнт. Для чернеток використовуйте preview client з токеном.

// lib/sanity/client.ts import { createClient } from 'next-sanity' export const client = createClient({ projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!, dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production', apiVersion: process.env.SANITY_API_VERSION, // встановіть актуальну версію useCdn: process.env.NODE_ENV === 'production', }) export const previewClient = createClient({ projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!, dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production', apiVersion: process.env.SANITY_API_VERSION, useCdn: false, token: process.env.SANITY_API_TOKEN, perspective: 'previewDrafts', }) 

У серверних компонентах використовуйте client.fetch з GROQ-запитами. Приклад сторінки посту:

// app/posts/[slug]/page.tsx import { client, previewClient } from '@/lib/sanity/client' import { groq } from 'next-sanity' import { draftMode } from 'next/headers' const query = groq`*[_type == "post" && slug.current == $slug][0] { _id, title, body, publishedAt, "author": author->{ name }, "slug": slug.current }` export default async function PostPage({ params }: { params: { slug: string } }) { const { isEnabled } = draftMode() const activeClient = isEnabled ? previewClient : client const post = await activeClient.fetch(query, { slug: params.slug }, { next: { tags: [`post-${params.slug}`] }, }) if (!post) notFound() return <Article post={post} /> } export async function generateStaticParams() { const slugs = await client.fetch<string[]>(`*[_type == "post"].slug.current`) return slugs.filter(Boolean).map(slug => ({ slug })) } 

Як налаштувати ISR через webhook?

ISR оновлює сторінки тільки коли контент змінився — це знижує навантаження на сервер. Створіть webhook в Sanity та ендпоінт, який викликає revalidateTag. Приклад:

// app/api/revalidate/route.ts import { revalidateTag } from 'next/cache' import { parseBody } from 'next-sanity/webhook' export async function POST(req: Request) { try { const { isValidSignature, body } = await parseBody<{ _type: string; slug?: { current: string } }>( req, process.env.SANITY_WEBHOOK_SECRET! ) if (!isValidSignature) { return Response.json({ message: 'Invalid signature' }, { status: 401 }) } if (body._type === 'post') { revalidateTag('posts') if (body.slug?.current) { revalidateTag(`post-${body.slug.current}`) } } return Response.json({ revalidated: true }) } catch (err) { return Response.json({ message: 'Invalid request' }, { status: 400 }) } } 

Інтеграція з Nuxt 3

Встановіть модуль @nuxtjs/sanity та додайте конфігурацію в nuxt.config.ts.

// nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxtjs/sanity'], sanity: { projectId: process.env.NUXT_PUBLIC_SANITY_PROJECT_ID, dataset: 'production', apiVersion: process.env.SANITY_API_VERSION, useCdn: process.env.NODE_ENV === 'production', }, }) 

У компоненті використовуйте $sanity для fetch-запитів:

<template> <article v-if="post"> <h1>{{ post.title }}</h1> <SanityContent :blocks="post.body" /> </article> </template> <script setup lang="ts"> const { $sanity } = useNuxtApp() const route = useRoute() const { data: post } = await useAsyncData(`post-${route.params.slug}`, () => $sanity.fetch( `*[_type == "post" && slug.current == $slug][0] { title, body }`, { slug: route.params.slug } ) ) </script> 

Чи підтримує Remix ISR?

У Remix дані завантажуються в loader-функціях на сервері — сторінка рендериться вже з контентом, без hydration-затримок та клієнтських waterfall-запитів. Використовуйте @sanity/client напряму в loader: client.fetch(query, { slug: params.slug }), потім передайте дані в компонент через useLoaderData.

Remix не підтримує ISR з коробки. Для кешування використовуйте HTTP-заголовки Cache-Control: s-maxage=3600, stale-while-revalidate=86400 в loader — Cloudflare та Vercel Edge підхоплюють їх автоматично. Webhook від Sanity інвалідує кеш через Cloudflare Purge API при публікації нового контенту. Середній час відповіді при правильно налаштованому CDN — 60–100 мс.

Типізація контенту через Sanity TypeGen

Команда npx sanity@latest typegen generate створює TypeScript-типи зі схеми студії. GROQ-запити стають типобезпечними: IDE підказує поля, TypeScript ловить опечатки на етапі збірки. Це економить 1–2 години на кожному новому типі контенту та знижує кількість помилок у production.

Порівняння фреймворків: швидкість роботи з Sanity Client

На практиці Sanity Client швидше fetch-запитів у 2–3 рази завдяки CDN та ефективному кешуванню.

Що входить в роботу

• Налаштування Sanity Client та конфігурація API-версії
• Реалізація preview mode (draft mode) з токенами
• Webhook для on-demand revalidation
• GROQ-запити та типізація контенту (generated types)
• Оптимізація зображень через Sanity Image CDN
• Документація та навчання команди

Як будується процес роботи

1. Аналітика: обговорюємо архітектуру контенту та запитів
2. Проектування: схеми GROQ-запитів, типи
3. Реалізація: інтеграція клієнта, сторінки, preview
4. Тестування: перевірка гідратації, помилок ревалідації
5. Деплой: налаштування змінних оточення, webhook

Терміни та вартість

Вартість визначається після аналізу вашого проєкту. Орієнтовний час: Next.js App Router — 1–2 дні, Nuxt 3 — 1 день, Remix — 1 день, всі 3 фреймворки — 3–5 днів. Замовте інтеграцію — ми підготуємо точну оцінку. Отримайте консультацію: наші інженери допоможуть обрати оптимальну архітектуру.