How we created our blog with Notion and NextJS

// app/api/fetch-notion-pages/route.ts

iimport { NextResponse } from "next/server";
import { Client } from "@notionhq/client";
import { PageObjectResponse } from "@notionhq/client/build/src/api-endpoints";
import { NotionCompatAPI } from "notion-compat";
import { createAdminClient } from "@/utils/supabase/server";
import { ExtendedRecordMap } from "notion-types";

// Configuration
const CONFIG = {
  DATABASE_ID: "1f431632a35a80b0b9aad412a34843a7",
  PAGE_SIZE: 100,
  PROPERTY_NAMES: {
    PAGE_ID: "Page ID",
    PATHNAME: "Pathname",
    TITLE: "Title",
    DESCRIPTION: "Description",
    PUBLISHED: "Published",
    LAST_MODIFIED: "Last Modified",
    PARENT_PAGE_ID: "parentPageId",
  },
} as const;

// Type definitions
interface NotionPageData {
  pageId: string;
  pathname: string;
  isPublished: boolean;
  title: string;
  description: string;
  imageUrl: string;
  recordMap: ExtendedRecordMap;
  parentPageId: string;
  icon: string;
  lastModifiedAt: string | null;
  createdAt: string;
  updatedAt: string;
}

type NotionTitleProperty = {
  type: "title";
  title: Array<{ plain_text: string }>;
};

type NotionRichTextProperty = {
  type: "rich_text";
  rich_text: Array<{ plain_text: string }>;
};

type NotionCheckboxProperty = {
  type: "checkbox";
  checkbox: boolean;
};

type NotionDateProperty = {
  type: "date";
  date: { start: string } | null;
};

// Initialize Notion clients
const notionClient = new Client({
  auth: process.env.NOTION_TOKEN,
});

const notionCompatAPI = new NotionCompatAPI(
  new Client({
    auth: process.env.NOTION_TOKEN,
  })
);

// Utility functions
const formatPageId = (pageId: string): string => {
  return `${pageId.slice(0, 8)}-${pageId.slice(8, 12)}-${pageId.slice(
    12,
    16
  )}-${pageId.slice(16, 20)}-${pageId.slice(20)}`;
};

const getPropertyValue = {
  title: (prop: NotionTitleProperty | unknown): string => {
    return prop &&
      typeof prop === "object" &&
      "type" in prop &&
      prop.type === "title"
      ? (prop as NotionTitleProperty).title?.[0]?.plain_text || ""
      : "";
  },

  richText: (prop: NotionRichTextProperty | unknown): string => {
    return prop &&
      typeof prop === "object" &&
      "type" in prop &&
      prop.type === "rich_text"
      ? (prop as NotionRichTextProperty).rich_text?.[0]?.plain_text || ""
      : "";
  },

  checkbox: (prop: NotionCheckboxProperty | unknown): boolean => {
    return prop &&
      typeof prop === "object" &&
      "type" in prop &&
      prop.type === "checkbox"
      ? (prop as NotionCheckboxProperty).checkbox || false
      : false;
  },

  date: (prop: NotionDateProperty | unknown): string | null => {
    return prop &&
      typeof prop === "object" &&
      "type" in prop &&
      prop.type === "date"
      ? (prop as NotionDateProperty).date?.start || null
      : null;
  },
};

const extractPageMetadata = async (
  pageEntry: PageObjectResponse
): Promise<NotionPageData> => {
  const properties = pageEntry.properties;
  const pageId = getPropertyValue.title(
    properties[CONFIG.PROPERTY_NAMES.PAGE_ID]
  );

  // Fetch the recordMap for this page
  const recordMap = await notionCompatAPI.getPage(pageId || pageEntry.id);

  // Extract icon and cover image from recordMap
  let icon = "";
  let imageUrl = "";

  const formattedPageId = pageId ? formatPageId(pageId) : pageEntry.id;
  const pageBlock = recordMap.block[formattedPageId];

  if (pageBlock?.value?.format) {
    icon = pageBlock.value.format.page_icon || "";
    imageUrl = pageBlock.value.format.page_cover || "";
  }

  return {
    pageId,
    pathname: getPropertyValue.richText(
      properties[CONFIG.PROPERTY_NAMES.PATHNAME]
    ),
    isPublished: getPropertyValue.checkbox(
      properties[CONFIG.PROPERTY_NAMES.PUBLISHED]
    ),
    title: getPropertyValue.richText(properties[CONFIG.PROPERTY_NAMES.TITLE]),
    description: getPropertyValue.richText(
      properties[CONFIG.PROPERTY_NAMES.DESCRIPTION]
    ),
    imageUrl,
    recordMap,
    parentPageId: getPropertyValue.richText(
      properties[CONFIG.PROPERTY_NAMES.PARENT_PAGE_ID]
    ),
    icon,
    lastModifiedAt: getPropertyValue.date(
      properties[CONFIG.PROPERTY_NAMES.LAST_MODIFIED]
    ),
    createdAt: pageEntry.created_time,
    updatedAt: pageEntry.last_edited_time,
  };
};

const storePagesInSupabase = async (pages: NotionPageData[]): Promise<void> => {
  const supabase = await createAdminClient();

  // Use a transaction for better performance and atomicity
  const { error } = await supabase
    .from("notion_pages")
    .upsert(pages, { onConflict: "pageId" });

  if (error) {
    throw new Error(`Failed to store pages in Supabase: ${error.message}`);
  }
};

export async function GET() {
  try {
    // Query the database to get all entries
    const response = await notionClient.databases.query({
      database_id: CONFIG.DATABASE_ID,
      page_size: CONFIG.PAGE_SIZE,
    });

    if (!response.results.length) {
      return NextResponse.json({
        success: true,
        message: "No pages found in the database",
        pages: [],
      });
    }

    // Process each entry and fetch its recordMap
    const pagesWithRecordMaps = await Promise.all(
      response.results.map((entry) =>
        extractPageMetadata(entry as PageObjectResponse)
      )
    );

    // Store the data in Supabase
    await storePagesInSupabase(pagesWithRecordMaps);

    return NextResponse.json({
      success: true,
      pages: pagesWithRecordMaps,
    });
  } catch (error) {
    console.error("Error in store-pages route:", error);

    const errorMessage =
      error instanceof Error ? error.message : "Unknown error occurred";
    return NextResponse.json(
      {
        success: false,
        error: "Failed to fetch data from Notion database",
        details: errorMessage,
      },
      { status: 500 }
    );
  }
}