Fetching All Pages via API

Stubby CMS provides a robust and predictable REST API designed to help you retrieve your site's content programmatically. By utilizing the collections endpoint, developers can fetch a complete list of pages and their associated metadata—ideal for building dynamic navigation menus, sitemaps, or index pages in modern frameworks like Next.js, Nuxt, or Astro.

API Endpoint Detail

To access your content collections, send a GET request to the following resource:

Authentication Requirements

All requests to the Stubby CMS API must be authenticated. You are required to pass your site's unique API key as a query parameter in the request URL.

Sample Implementation (JavaScript/Next.js)

The following example demonstrates how to use the native fetch API to retrieve your site's collections. This pattern is recommended for Server Components or static site generation (SSG).

// Environment variables are recommended for storing sensitive API keys
const STUBBY_CMS_API_KEY = process.env.STUBBY_API_KEY; 
const siteId = "your-site-id";

async function getCollections() {
  const url = new URL(`https://stubby.io/api/v1/sites/${siteId}/collections`);
  url.searchParams.append("apiKey", STUBBY_CMS_API_KEY);

  const response = await fetch(url.href, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  
  if (!response.ok) {
    throw new Error(`Error: ${response.status} - Failed to fetch collections`);
  }

  return await response.json();
}

Understanding the Response Structure

The API returns a hierarchical tree structure that precisely mirrors your folder organization within the Stubby CMS workspace. This recursive format allows for easy mapping to nested UI components like sidebars or breadcrumbs.

Example JSON Response

[
  {
    "title": "Introduction",
    "slug": "intro",
    "type": "page"
  },
  {
    "title": "Developer Guides",
    "type": "folder",
    "children": [
      {
        "title": "Authentication",
        "slug": "guides/auth",
        "type": "page"
      }
    ]
  }
]

By leveraging this structured data, you can automate your site's navigation logic, ensuring that any new pages or folders added in the CMS are automatically reflected on your live website without additional code changes.