Directus Integration with Frontend (React/Vue/Next.js)

Integrating Directus with Frontend (React/Next.js)

Directus provides an official TypeScript SDK with typed requests. For Next.js App Router — Server Components for server requests and React hooks for client interaction.

SDK Installation

npm install @directus/sdk

Client Setup

// lib/directus.ts
import { createDirectus, rest, staticToken, readItems, readItem } from '@directus/sdk'

interface Article {
  id: number
  title: string
  slug: string
  content: string
  status: 'draft' | 'published' | 'archived'
  date_published: string
}

interface DirectusSchema {
  articles: Article[]
  categories: { id: number; name: string }[]
}

const directus = createDirectus<DirectusSchema>(process.env.DIRECTUS_URL!)
  .with(staticToken(process.env.DIRECTUS_STATIC_TOKEN!))
  .with(rest())

export { directus }

Server Components (Next.js App Router)

// app/articles/page.tsx
import { directus } from '@/lib/directus'
import { readItems } from '@directus/sdk'

export default async function ArticlesPage({
  searchParams,
}: {
  searchParams: { page?: string }
}) {
  const page = Number(searchParams.page) || 1
  const limit = 12

  const articles = await directus.request(
    readItems('articles', {
      fields: ['id', 'title', 'slug', 'excerpt', 'date_published'],
      filter: { status: { _eq: 'published' } },
      sort: ['-date_published'],
      limit,
      offset: (page - 1) * limit,
    })
  )

  return <ArticleGrid articles={articles} />
}

Webhooks for On-demand Revalidation

// app/api/revalidate/route.ts
import { revalidateTag, revalidatePath } from 'next/cache'

export async function POST(req: Request) {
  const secret = req.headers.get('x-webhook-secret')
  if (secret !== process.env.DIRECTUS_WEBHOOK_SECRET) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const { collection, keys } = await req.json()

  revalidateTag(collection)

  if (collection === 'articles' && keys[0]) {
    revalidatePath(`/articles/${keys[0]}`)
  }

  return Response.json({ revalidated: true })
}

Timeline

Directus integration with Next.js (SDK, ISR, webhooks, TypeScript types) — 2–3 days.