Sanity Integration with Next.js / Nuxt.js / Remix

Integrating Sanity with Next.js / Nuxt.js / Remix

Sanity works through HTTP API — any framework can read content. Official libraries: next-sanity for Next.js, @sanity/client for others.

Next.js App Router

npm install next-sanity @sanity/client

// lib/sanity/client.ts
import { createClient } from 'next-sanity'

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: process.env.NODE_ENV === 'production',
})

// app/posts/[slug]/page.tsx
import { client } from '@/lib/sanity/client'
import { groq } from 'next-sanity'

const query = groq`*[_type == "post" && slug.current == $slug][0] { title, body }`

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await client.fetch(query, { slug: params.slug })
  if (!post) notFound()

  return <article><h1>{post.title}</h1></article>
}

Nuxt 3

npm install @nuxtjs/sanity

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

Remix

// app/routes/posts.$slug.tsx
import { createClient } from '@sanity/client'

const client = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
})

export async function loader({ params }) {
  const post = await client.fetch(
    `*[_type == "post" && slug.current == $slug][0]`,
    { slug: params.slug }
  )
  return json(post)
}

Timeline

Sanity integration with Next.js App Router (ISR, webhooks, preview mode) — 1–2 days.