Are there plans to make the NotionRenderer compatible with the Next.js App Router?

[Jdelbarcogarza]

I want to use this component with the App Router for an upcoming project but I was not able to make it work.

I don't know if the problem relies on the notion-client not working currently ( issue #498 ), but if the problem persists because the library is not compatible with NextJS 13, then I would like to help somehow.

Thanks in advance

[Reomar]

In Next 13 the components are server components by default which will not work with some of react client-side features like useeffect().

you could simply make a walkaround by just moving the interactive code to a client component by using "use client" at the top of the file.

Here is an example:

./page.jsx

import { NotionAPI } from "notion-client";
import NotionPage from "./components/NotionPage";

export default async function Home() {
  const notion = new NotionAPI();

  const recordMap = await notion.getPage("4f51a601c1b14a23b5bc7737efcfee6b");
  return (
    <main>
      <NotionPage recordMap={recordMap} />
    </main>
  );
}

./components/NotionPage.jsx

"use client"
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
import 'react-notion-x/src/styles.css'
import dynamic from 'next/dynamic'


export default function NotionPage({recordMap}) {
const Code = dynamic(() =>
  import('react-notion-x/build/third-party/code').then((m) => m.Code)
)
const Collection = dynamic(() =>
  import('react-notion-x/build/third-party/collection').then(
    (m) => m.Collection
  )
)
const Equation = dynamic(() =>
  import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
)
const Pdf = dynamic(
  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
  {
    ssr: false
  }
)
const Modal = dynamic(
  () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
  {
    ssr: false
  }
)

    return (
        <NotionRenderer recordMap={recordMap} darkMode={true} components={{
            Code,
            Collection,
            Equation,
            Modal,
            Pdf
          }}
      />

    )
}

[Jdelbarcogarza]

It worked! Thanks, for the help :)

[phips28]

Is It planned to work with App Router?

"use client" is no option as its bad for SEO...

[basejb]

@Reomar Thanks! You saved my two hours. 🙂

[vader1359]

@Reomar Is there any way to make it works with the nextImage?
I tried all the things but cannot make const previewImageMap = await getPreviewImageMap(recordMap); this work. Then due to this, the customer images do not work.

[nklswbr]

How does this work if you wanna build a static site?