How to Fetch Page Content via API

Overview

Stubby CMS provides a high-performance REST API for fetching content into your Next.js or React applications. You can retrieve specific page data, including frontmatter and MDX content, by sending a authorized GET request to the content delivery endpoint.

Authentication & Parameters

To access your content, you must provide your unique API key. This ensures your data remains secure while being accessible to your frontend application.

Implementation Example

The following JavaScript example demonstrates how to fetch page content using the native fetch API. This pattern is ideal for Server Components in Next.js or standard Node.js environments.

// Configuration
const STUBBY_CMS_API_KEY = "<YOUR_API_KEY>"; 
const siteId = "<YOUR_SITE_ID>";
const slugOrId = "hello-world";

// Construct the URL with query parameters
const url = new URL(`https://stubby.io/api/v1/sites/${siteId}/pages/${slugOrId}`);
url.searchParams.append("apiKey", STUBBY_CMS_API_KEY);

// Execute the request
const res = await fetch(url.href, { next: { revalidate: 60 } });

if (!res.ok) {
  throw new Error("Failed to fetch page content from Stubby CMS");
}

const data = await res.json(); 
console.log(data); // Contains title, content, and frontmatter

Response Structure

The API returns a JSON object designed for easy consumption. The response includes:

• Metadata: All fields defined in your page's frontmatter (e.g., title, date, tags).
• Content: The raw MDX or Markdown body of the page.
• System Fields: Unique identifiers and timestamps for the content.

This structure allows you to pass the content directly into MDX providers like next-mdx-remote or contentlayer for rendering.