Headless CMS + SSG — Content Management for Static Sites

// Next.js + Contentful — getStaticProps
const contentful = require('contentful');

const client = contentful.createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
});

// Fetch all blog posts
export async function getStaticProps() {
    const entries = await client.getEntries({
        content_type: 'blogPost',
        order: '-fields.publishDate',
        limit: 20,
    });

    const posts = entries.items.map(item => ({
        id: item.sys.id,
        title: item.fields.title,
        slug: item.fields.slug,
        excerpt: item.fields.excerpt,
        content: item.fields.content,
        image: item.fields.featuredImage?.fields?.file?.url,
        publishDate: item.fields.publishDate,
        author: item.fields.author?.fields?.name,
    }));

    return {
        props: { posts },
        revalidate: 60,
    };
}

// Next.js + Sanity — GROQ queries
import { createClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

const client = createClient({
    projectId: process.env.SANITY_PROJECT_ID,
    dataset: process.env.SANITY_DATASET || 'production',
    apiVersion: '2024-01-01',
    useCdn: true,
});

const builder = imageUrlBuilder(client);

export async function getStaticProps() {
    const query = `*[_type == "post" && defined(slug.current)] |
        order(publishedAt desc) [0...20] {
        _id,
        title,
        "slug": slug.current,
        excerpt,
        body,
        "imageUrl": mainImage.asset->url,
        publishedAt,
        "authorName": author->name
    }`;

    const posts = await client.fetch(query);

    // Transform image URLs with Sanity's image builder
    const postsWithImages = posts.map(post => ({
        ...post,
        imageUrl: post.imageUrl
            ? builder.image(post.imageUrl).width(800).url()
            : null
    }));

    return {
        props: { posts: postsWithImages },
        revalidate: 60,
    };
}

// Next.js + Strapi (self-hosted CMS)
const STRAPI_URL = process.env.STRAPI_URL || 'http://localhost:1337';

export async function getStaticProps() {
    const res = await fetch(`${STRAPI_URL}/api/posts`, {
        headers: {
            Authorization: `Bearer ${process.env.STRAPI_TOKEN}`,
        },
    });

    if (!res.ok) {
        throw new Error(`Strapi fetch failed: ${res.status}`);
    }

    const { data } = await res.json();

    const posts = data.map(item => ({
        id: item.id,
        title: item.attributes.title,
        slug: item.attributes.slug,
        content: item.attributes.content,
        image: item.attributes.image?.data?.attributes?.url,
        publishedAt: item.attributes.publishedAt,
    }));

    return {
        props: { posts },
        revalidate: 60,
    };
}

// Webhook endpoint for Strapi
export async function handleStrapiWebhook(req, res) {
    if (req.body.event === 'entry.publish') {
        // Trigger on-demand revalidation
        await res.revalidate('/blog');
        await res.revalidate(`/blog/${req.body.entry.slug}`);
    }
    res.json({ received: true });
}

// pages/api/preview.js — Next.js preview mode
export default async function handler(req, res) {
    const { slug, secret } = req.query;

    // Verify preview secret
    if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
        return res.status(401).json({ message: 'Invalid secret' });
    }

    // Enable preview mode
    res.setPreviewData({
        slug,
        timestamp: Date.now(),
    });

    // Redirect to the preview page
    res.redirect(`/blog/${slug}`);
}

// pages/blog/[slug].js — Handle preview
export async function getStaticProps({ params, preview = false }) {
    // Use preview API when in preview mode
    const host = preview
        ? 'preview.contentful.com'
        : 'cdn.contentful.com';

    const client = contentful.createClient({
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: preview
            ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
            : process.env.CONTENTFUL_ACCESS_TOKEN,
        host,
    });

    const entry = await client.getEntries({
        content_type: 'blogPost',
        'fields.slug': params.slug,
    });

    if (!entry.items.length) {
        return { notFound: true };
    }

    return {
        props: { post: entry.items[0].fields },
        revalidate: preview ? 1 : 60,
    };
}