Integration Examples for Every Stack
From plain JavaScript to React hooks and Next.js server components — copy-paste examples to integrate Supabase CMS content into any project.
JavaScript
Plain JavaScript Fetch
const API = 'https://your-project.supabase.co/functions/v1/posts-api';
const KEY = 'sk_your_api_key';
const res = await fetch(`${API}?page=1&limit=10`, {
headers: { apikey: KEY }
});
const { data, pagination } = await res.json();React Hook
React Custom Hook
function usePosts(filters = {}) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchPosts(filters).then(setData).finally(() => setLoading(false));
}, [JSON.stringify(filters)]);
return { data, loading };
}Next.js Server Component
Next.js Server Component
// app/blog/page.tsx
export default async function BlogPage() {
const posts = await fetch(`${process.env.CMS_API_URL}?limit=10`, {
headers: { apikey: process.env.CMS_API_KEY! }
}).then(r => r.json());
return posts.data.map(post => <article key={post.id}>{post.title}</article>);
}cURL
cURL Command
curl -X GET \
"https://your-project.supabase.co/functions/v1/posts-api?limit=5" \
-H "apikey: sk_your_api_key"Why These Examples Work Everywhere
Framework Agnostic
Works with any framework: React, Next.js, Vue, Svelte, or plain JavaScript. The REST API has no framework requirements.
TypeScript Types
Full TypeScript interfaces for all API responses. Autocomplete and type safety out of the box.
Pagination Ready
All examples include pagination support. Navigate large content archives efficiently.