Quickstart

Stubby CMS enables you to effortlessly establish a headless CMS for your blog while allowing you to author MDX content directly in the cloud. This integration is perfect for any developers working with Next.js or Nuxt.js applications. Follow these steps to get started:

1. Setting up your site

• Begin by registering on Stubby CMS at https://stubby.io/login.
• Once logged in, navigate to your dashboard and click the "Create New Site" button to set up a new site.

2. Creating content

• Add files and folders through the interface to organize your content. Write your MDX content as if you're directly working within your Next.js or Nuxt.js app environment.

3. Configuring your Next.js app

In your Next.js (version 13 or above) application, create a file named blog/page.tsx. This file will serve as the entry point for your blog.

Here's a simple example to fetch data from the server for your blog list page:

// Fetch data from the server
const getData = async () => {
  const siteId = "*****";
  const url = new URL(`https://stubby.io/api/v1/sites/${siteId}/folders`);
  url.searchParams.append("apiKey", API_KEY);
  const res = await fetch(url.href, {
    cache: "force-cache",
    next: { tags: ["posts"] },
  });
  const data = await res.json();
  return data;
};

const BlogListPage = async () {
  const data = await getData();

  return (
    <main className="container pb-40 pt-16">
      <h1>Blog</h1>
      <ul>
        {data.map((blog: any) => {
          return <li key={blog.slug}>
            <Link href={`/blog/${data.slug}`}>{blog.name}</Link>
          </li>;
        })}
      </ul>
    </main>
  );
}

export default BlogListPage;

4. Building individual blog pages

• Create a new file named blog/[slug]/page.tsx for individual blog posts. This file handles the rendering of each blog post based on its slug.

For fetching a single page's data

import Markdown from "markdown-to-jsx";

const getData = async (slug: string) => {
  const siteId = "*****";
  const url = new URL(`https://stubby.io/api/v1/sites/${siteId}/pages/${slug}`);
  url.searchParams.append("apiKey", API_KEY);
  try {
    const res = await fetch(url.href,{
      next: { tags: [slug] },
    });
    const data = await res.json();
    return data;
  } catch (e) {
    return null;
  }
}

const BlogView = async ({ params }: any) => {
  const { slug } = params;
  const data = await getData(slug);
  if (!data) { notFound(); }

  return (
    <div>
      <h1>{data.name}</h1>
        <article className="prose">
          <Markdown options={{overrides: components}}>
            {data.content}
          </Mdx>
        </article>
      </div>
    );
}

export default BlogView;

5. Enabling content revalidation

• Consider setting up a webhook for revalidating your blog content on stubby.io whenever new content is published. This ensures your site always serves the most up-to-date content.

// api/revalidate/route.ts

import { NextRequest, NextResponse } from "next/server";
import { revalidateTag } from "next/cache";

export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get("tag");
  const slug = request.nextUrl.searchParams.get("slug");
  if (tag || slug) {
    if (tag) revalidateTag(tag);
    if (slug) revalidateTag(slug);

    return NextResponse.json({ revalidated: true, now: Date.now() });
  } else {
    return NextResponse.json(
      { revalidated: false, now: Date.now() },
      { status: 400 },
    );
  }
}

Then you can configure this url in the Settings -> Webhook settings

6. Enhancing SEO and Open graph images

• Utilize the front matter section of your MDX files to add SEO and Open Graph metadata. This data can significantly improve your site's SEO performance and social media visibility.

By following these steps, you can quickly set up a robust blog using Stubby CMS's remote MDX content, enhancing your Next.js or Nuxt.js applications with dynamic, easily manageable content.