This skill should be used when the user wants to "fetch Directus data in Next.js", "display Directus content in Next.js pages", "render Directus images in Next.js", "use Directus SDK with Server Components", "create Next.js pages from Directus collections", "add TypeScript types for Directus", or needs integration patterns between Directus data and Next.js rendering.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
This skill should be used when the user wants to "fetch Directus data in Next.js", "display Directus content in Next.js pages", "render Directus images in Next.js", "use Directus SDK with Server Components", "create Next.js pages from Directus collections", "add TypeScript types for Directus", or needs integration patterns between Directus data and Next.js rendering.
Directus to Next.js Integration
Patterns for fetching Directus data in Next.js Server Components, handling images, typing schemas, and managing cache revalidation.
SDK Client Setup
The Directus client lives in lib/directus.ts as a singleton. Two client variants:
Relational fields use union types: author: string | Author — it's a UUID string when not expanded, or the full object when fetched with fields: ['author.*'].
Image Handling
Directus serves file assets at {DIRECTUS_URL}/assets/{file_id}. Create a helper that includes authentication — Directus assets return 403 Forbidden unless the public role has read access to directus_files or the URL includes an access_token:
exportfunctiondirectusAsset(fileId: string | null,
params?: { width?: number; height?: number; fit?: 'cover' | 'contain' | 'inside'; quality?: number }
): string | null {
if (!fileId) returnnull;
const url = newURL(`/assets/${fileId}`, process.env.NEXT_PUBLIC_DIRECTUS_URL);
if (params?.width) url.searchParams.set('width', String(params.width));
if (params?.height) url.searchParams.set('height', String(params.height));
if (params?.fit) url.searchParams.set('fit', params.fit);
if (params?.quality) url.searchParams.set('quality', String(params.quality));
// Include access_token — without it, assets return 403 unless the public role has file read accessconst token = process.env.DIRECTUS_ADMIN_TOKEN;
if (token) url.searchParams.set('access_token', token);
return url.toString();
}
Asset authentication options (pick one):
Approach
When to use
access_token in URL (above)
Quick setup — token is in the URL but proxied through next/image so not directly exposed to end users
Public role with file read access
Production best practice — configure in Directus: Settings > Roles > Public > directus_files read permission
API route proxy
Maximum security — create /api/assets/[id] route that fetches with the token server-side
Dynamic route [slug] + readItem or filtered readItems
Static generation
generateStaticParams + readItems for slugs
Search
searchParams → readItems with search param
Filtered list
searchParams → Directus filter object
Image gallery
readItems on files collection + next/image with asset URL helper
Form submission
Server Action → createItem/updateItem → revalidatePath
Global settings
Singleton collection + readItems('global') in layout
SEO metadata
generateMetadata + readItems by slug
When work should be offloaded
For expensive or unreliable operations triggered from Server Actions or route handlers (AI calls, webhook processing, image transformation, bulk imports, third-party API calls), do not run them inline — delegate to a Trigger.dev task. See the background-tasks skill for how to wire tasks.trigger<typeof myTask>(...) into a route handler, the force-dynamic requirement, and the realtime status hook. For Directus-event-driven work, see directus-to-trigger.
