Automating Website Content Updates with Notion as a CMS

Why Use Notion to Manage Website Pages?

Notion is a powerful tool for content management, offering an intuitive interface for non-technical users. By using Notion as a CMS, you can:

• Easily update website content without needing a developer.
• Centralize content management in a single Notion workspace.
• Enable real-time or scheduled updates based on your preferred Next.js fetching strategy.

Fetching Content from Notion into Next.js

To automate content updates, we can pull data from Notion into Next.js using the Notion API. Here’s how it works:

1. Setting Up a Notion Database for Content Management

Instead of just a blog database, create separate Notion databases for different content types:

• Landing Page Content (e.g., headline, subtext, call-to-action)
• FAQs
• Team Members
• Product Features

Each database will contain structured fields that will map to components in your Next.js app.

2. Connecting Next.js to Notion API

Install Notion’s API client:

npm install @notionhq/client

Then, create a utility function to fetch content:

import { Client } from '@notionhq/client';

const notion = new Client({ auth: process.env.NOTION_API_KEY });

export async function fetchNotionData(databaseId) {
  const response = await notion.databases.query({ database_id: databaseId });
  return response.results;
}

3. Displaying Content in Next.js Pages

Use the fetched data to populate dynamic pages.

import { fetchNotionData } from '@/lib/notion';

export async function getServerSideProps() {
  const content = await fetchNotionData(process.env.NOTION_LANDING_PAGE_DB);
  return { props: { content } };
}

export default function LandingPage({ content }) {
  return (
    <div>
      <h1>{content[0]?.properties?.Title?.title[0]?.text?.content}</h1>
      <p>{content[0]?.properties?.Description?.rich_text[0]?.text?.content}</p>
    </div>
  );
}

This allows your landing page to update dynamically whenever the Notion database is modified.

Using ISR for Periodic Updates

Instead of fetching content on every request (which can slow down performance), use ISR:

export async function getStaticProps() {
  const content = await fetchNotionData(process.env.NOTION_LANDING_PAGE_DB);
  return { props: { content }, revalidate: 60 };
}

With revalidate: 60, Next.js will regenerate the page every 60 seconds if there are updates.

Real-Time Updates with Notion Webhooks

For instant content updates, use a webhook system:

1. Set up a Notion integration with a webhook service like Pipedream or Zapier.
2. Create a Next.js API route to receive webhook data and trigger a re-fetch.
3. Use a background revalidation strategy (e.g., Next.js On-Demand Revalidation).

Example API route:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    await res.revalidate('/'); // Revalidate the home page
    return res.json({ revalidated: true });
  }
  res.status(405).json({ message: 'Method Not Allowed' });
}

This ensures that changes in Notion reflect immediately on the website.

Conclusion

By integrating Notion with Next.js, you can automate content updates for more than just blog posts. Whether it’s landing pages, FAQs, or team sections, Notion can serve as a lightweight CMS for managing various types of content efficiently. Depending on your needs, you can choose SSR, ISR, or real-time updates with webhooks to keep your content fresh without manual deployments.

Stay tuned for more advanced use cases in future posts!