Getting started

Introduction

The following guide will teach you the basics of @notion-render/client by walking you through how to render your pages using Next.JS.

ℹ️

If you want to create a full blog, take a look at the Contentlayer Notion Source plugin! This documentation has been made with it.

🔨 Setup the project

Create the Next.JS project

First create a brand new Next.JS project and cd into it:

$ npx create-next-app notion-render-example
$ cd notion-render-example

As the skeleton contains some styling, delete the content of styles/globals.css

Install dependencies

Install the library and its dependencies:

$ npm install @notion-render/client @notionhq/client

ℹ️

The @notionhq/client library is the official Notion JS SDK. It is required to render complexe blocks like tables, columns, etc.

Configure the Client and the Renderer

Let’s create an instance of @notionhq/client and @notion-renderer/client in libs/notion.ts that we will use accross our app:

// libs/notion.ts

import { Client } from "@notionhq/client";
import { NotionRenderer } from "@notion-render/client";

const client = new Client({ auth: process.env.NOTION_TOKEN });
const renderer = new NotionRenderer({ client });

export const notion = {
  client,
  renderer,
};

ℹ️

Follow the guide Create Notion Token to create your own integration and get a NOTION_TOKEN.

🚀 Render your first page

Setup getServerSideProps

In this guide we will create a simple pages/[slug].tsx page where the slug will be the ID of the Notion Page we will render.

In the getServerSideProps function, retreive the slug from the parameters, and use the @notionhq/client instance to get the page blocks.

Transform thoses blocks into HTML and pass it in props.

// pages/[slug].tsx

import { notion } from "@/libs/notion";
import { BlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";

type Data = {
  html: string;
};

export const getServerSideProps: GetServerSideProps<Data> = async ({
  params,
}) => {
  if (!params || !params.slug) {
    return {
      notFound: true,
    };
  }

  const blocks = await notion.client.blocks.children
    .list({
      block_id: params.slug as string,
    })
    .then((res) => res.results as BlockObjectResponse[]);

  const html = await notion.renderer.render(...blocks);

  return {
    props: {
      html,
    },
  };
};

⚠️

Notion API can be slow. In production you should avoid Server Side Rendering and use Static Site Generation by using Next.JS features or a tool like Contentlayer.

Rendering the HTML

Now that your HTML is available, you can simply render it:

export default function Page({
  html,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <div
      className="notion-render"
      style={{ maxWidth: "800px", margin: "auto" }}
      dangerouslySetInnerHTML={{ __html: html }}
    ></div>
  );
}

Visit your page

Run the app by using npm run dev and visit http://localhost:3000/.

Depending on your page content, you should get something like this:

🎨 Styling your page

In our example page we have Headings, Columns, a Callout and a Bookmark but as you can see there is no style yet.

You can use your own style or you can import the theme provided by the library that tries to replicates the Notion design.

In this guide we are going to install Tailwind CSS and import the provided theme.

Install Tailwind CSS

Installing Tailwind for Next.JS is extremely straight forward:

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Import Tailwind and Notion Theme

In the file styles/globals.css add the following directives to import Tailwind and the provided Notion Theme.

# styles/globals.css

@import '@notion-render/client/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

And Voilà! We have a beautiful Notion styled page!