Closed Jdelbarcogarza closed 1 year ago
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
}}
/>
)
}
It worked! Thanks, for the help :)
Is It planned to work with App Router?
"use client" is no option as its bad for SEO...
@Reomar Thanks! You saved my two hours. 🙂
@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.
How does this work if you wanna build a static site?
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