Guides
Next.js integration
Add DeGallery to a Next.js App Router application without leaking credentials.
This guide uses the App Router pattern: fetch private metadata in a server component, then pass serializable gallery data into a small client component.
Install the packages
pnpm add @degallery/sdk @degallery/react @tanstack/react-queryCreate a server client
import { GalleryClient } from '@degallery/sdk';
export function getGalleryClient() {
return new GalleryClient({
apiUrl: process.env.DEGALLERY_API_URL,
apiKey: process.env.DEGALLERY_API_KEY,
});
}Fetch in a server component
import { getGalleryClient } from '@/lib/degallery';
import { GalleryView } from './gallery-view';
export default async function Page() {
const gallery = await getGalleryClient().getGallery('gallery_id');
return <GalleryView gallery={gallery} />;
}Render in a client component
'use client';
import { Gallery } from '@degallery/react';
export function GalleryView({ gallery }: { gallery: Gallery }) {
return <Gallery gallery={gallery} layout="Masonry" />;
}Do not use `NEXT_PUBLIC_DEGALLERY_KEY` for private access
Public keys and read tokens are appropriate for public browser reads. Private API keys belong in the server environment and should only be used by server-side SDK calls.
When to use GalleryProvider
Use GalleryProvider when a client component needs to load public gallery data or coordinate React Query caching. If the server already fetched the gallery, passing the payload directly is simpler and avoids a client-side metadata request.