Get started
Render a gallery with server-provided data or a provider.
Server-provided gallery
Prefer server-provided data when using SSR or a server component boundary:
import { Gallery } from '@degallery/react';
export function ProductGallery({ gallery }: { gallery: Gallery }) {
return <Gallery gallery={gallery} layout="Masonry" />;
}Load by ID
Use GalleryProvider when the client should load the gallery:
'use client';
import { Gallery, GalleryProvider } from '@degallery/react';
export function PublicGallery({ galleryId }: { galleryId: string }) {
return (
<GalleryProvider
apiUrl="https://api.degallery.mpotulo.com"
publishableKey={process.env.NEXT_PUBLIC_DEGALLERY_KEY}
>
<Gallery galleryId={galleryId} layout="Justified" />
</GalleryProvider>
);
}Use only a public/read credential in client code. For private galleries, have your server issue the bounded capability or provide the authorized gallery data.
Next.js boundary
Keep the data fetch in a server component or route handler, then pass the serializable gallery result into a small client component. This keeps API credentials out of the browser bundle while allowing the gallery and lightbox to remain interactive.
// app/gallery/page.tsx
import { GalleryClient } from '@degallery/sdk';
import { GalleryView } from './gallery-view';
export default async function Page() {
const client = new GalleryClient({
apiUrl: process.env.DEGALLERY_API_URL,
apiKey: process.env.DEGALLERY_API_KEY,
});
const gallery = await client.getGallery('gallery_uuid');
return <GalleryView gallery={gallery} />;
}// app/gallery/gallery-view.tsx
'use client';
import { Gallery } from '@degallery/react';
export function GalleryView({ gallery }: { gallery: Gallery }) {
return <Gallery gallery={gallery} layout="Masonry" />;
}Loading and error states
When using GalleryProvider, keep loading and error UI close to the gallery boundary. A surrounding page can remain usable if the gallery request fails, and the component can be retried without reloading the entire route.