notion as a blog post provider

Notion as Blog Post Creator/Provider

I’ve recently re-built the Trinity website and got to the point where the website required a blog section. It needed to be accessible to other employees in the company as well as being able to handle asynchronous updates and not be tedious to implement.

Exploring Alternatives to MDX

Initially when looking into blog post creation with NextJs, there is a lot of information that suggests using and supporting MDX. At first look, sure! this seems about right? Full control over writing presentation and support for code blocks. But… doing it this way means I have to support the knowledge of MDX internally and have to likely teach it to whoever wants to be able to contribute to blogs. Absolutely not something I want to deal with!

The Role of Authentication

Another issue that manages to find it’s way into the equation with MDX is authentication, I can commit to MDX but then I have to wrap my own auth around posting and editing blog posts. Sure, I can probably host the files on Supabase and use their auth systems, easy enough! I’ve done that before. But then I have to create login screens and roles and think about how content editing would work and again… not something I really want to do.

Discovering Notion’s Potential

So what comes to mind? Notion… We use Notion internally for odd bits of documentation and it works great as a writing tool, there must be a way to leverage this right? First method I tried to use was exporting Notion pages as HTML and storing them in my public directory and just embedding them as I saw fit. This worked, but I find myself loosing the live feel of Notion. Not really a point in using this method if it just generates static pages that can’t be updated post fact.

So I kept digging around and found react-notion-x a great package that does lightweight and fast rendering of Notion pages in React. Perfect! This is what I ended up using and it works just as expected. I get to subvert my previous issues of auth and MDX just piggy backing on Notion, only users that are in my team can access the pages and they can happily edit and create Notion pages asynchronously and they update live in realtime.

Thinking about Data Storage

At first I decided I would statically store my data in a JavaScript file as an array of JSON objects as the following:


export const storyData = [
 {
    id: "42e56a6590d5427398579ebaddb45814",
    title: "IoT for Smart Traffic",
    metaDataTitle: "IoT for Smart Traffic",
    description: `Syntell improves Johannesburg's traffic management with Trinity's IoT routers, offering remote control and real-time visibility.`,
    img: traffic,
    imgUrl: "/traffic.jpg",
    imgAlt:"Macbook laptop, black and white - Taken by Sergey Zolkin ",
    date: 1589271096000,
    author: {
      name: "Trinity",
      img: priscilla,
      position: "Design and Research Lead",
    },
    keywords: [
      "Smart Traffic Management",
      "IoT Solutions",
      "Traffic Light Connectivity",
      "Syntell Technology",
    ],
    tags: ["Traffic", "IoT"],
  },
]

/lib/storyData.js

Moving forward I decided against that this was too static and it also had repercussions of increasing my JS bundle size, so with that; decided to move this surrounding data into Supabase as the following data structure and moving images into their own buckets and just supplying links instead of StaticImageData.

Stories:

id	title	metaDataTitle	description	imgUrl	imgAlt	date	keywords	tags	author
string	string	string	string	string	string	timestamp	string[]	string[]	id

Authors:

id	name	imgUrl	position
number	string	string	string

Combing NextJS & Notion

Now that we have stored our blog data in Supabase I can use the supbase-js client to do my data fetching inside a server rendered page. This data then gets passed down to the NotionPage which is client rendered. I rather like the workflow here as I have all the capabilities of the new app dir loading.tsx and I have all my cached data in hand to do SEO.


interface Params {
  slug: string[];
}

async function getSingleStoryData(id: string): Promise<Story> {
  let { data } = await supabaseAdmin.from("stories").select().eq("id", id);
  // @ts-ignore
  return data[0];
}

async function getAuthor(id: number): Promise<StoryAuthor> {
  let { data } = await supabaseAdmin.from("Authors").select().eq("id", id);
  // @ts-ignore
  return data[0];
}

export default async function Home({ params }: { params: Params }) {
  const notion = new NotionAPI();
  const id = params.slug[1];
  const story = await getSingleStoryData(id);
  // @ts-ignore
  const author = await getAuthor(story.author);
  const recordMap = await notion.getPage(id);

  return (
    <section className={"py-8"}>
      <HiddenH1 title={story.metaDataTitle} />
      <NotionPage recordMap={recordMap} />
      <ArticleJsonLd
        useAppDir={true}
        url={`https://trinity.co.za/stories/${encodeUrl(story.description)}/${id}`}
        title={story.metaDataTitle || "Title"}
        images={[story.imgUrl || ""]}
        datePublished={new Date(story.date).toISOString()}
        authorName={author.name}
        description={story.description || "Description"}
      />
    </section>
  );
}

export async function generateMetadata({ params }: { params: Params }) {
  const id = params.slug[1];
  const data = await getSingleStoryData(id);
  // @ts-ignore
  const author = await getAuthor(data.author);

  const encodedDesc = encodeUrl(data.description);

  return {
    title: data.metaDataTitle,
    description: data.description,
    authors: [{ name: author.name }],
    keywords: data.keywords,
    openGraph: {
      type: "website",
      url: `https://www.trinity.co.za/stories/${encodedDesc}/${id}`,
      title: data.metaDataTitle,
      description: data.description,
      locale: "en_ZA",
      siteName: "Trinity",
      images: [
        {
          url: data.imgUrl,
          alt: data.description,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      site: "@site",
      creator: "@creator",
      images: data.imgUrl!,
    },
  };
}

stories/(story)/[…slug]/page.tsx

What using server rendered pages gives me here is the ability to use the new async loading.tsx skeleton, as we are using the new new app dir sync function components we can show a minimal loading screen while we are fetching our content.

You may assume this would impact SEO because Notion would need to index the content, right? Well, as it turns out, you can confidently disable indexing in Notion. This will help avoid the issue of low-ranking content due to duplication.

What is also rather lovely, if you look in the code block above. You will see that on the server we have all the blog data in hand which we can provide to create JSON-LD data along side standard generatedMetaData.

All in all, the more I repeat this pattern, the more I like it!

FAST! 🏎️

I wanted to come back here and show off some speed improvements I’ve done on my personal site I’ll add these across the board eventually.

But what I tried while just messing around was using the pre-fetch tag to see if I could try insta load my articles, and would ya guess it is now pretty much instant.

You can see text content is pretty much instant and we have some wait for notion image content to load, but in comparison to above we totally skip the loading skeletion.