Closed Geuni620 closed 1 year ago
It turns out it was just because I didn't include 'use client'. 🥲
How did you get this to work? Using "use client" throws Module not found: Can't resolve 'dns'
and not using "use client"
throws the error you received.. Using Next 13.4.1
Hello @0xPT
I can't remember exactly because I solved the previous error message, but I just added app/[slug]/[pageId]/page.tsx
// app/[slug]/[pageId]/page.tsx
const Page = async ({ params: { pageId } }: { params: { pageId: string } }) => {
const notion = new NotionAPI();
const recordMap = await notion.getPage(pageId);
return (
<NotionPage
recordMap={recordMap}
rootDomain={rootDomain}
previewImagesEnabled={previewImagesEnabled}
/>
);
};
export default Page;
This is the server component. But when I use 'use client' here, I get the error you are seeing.
However, no error occurred when 'use client' was attached within NotionPage.
// NotionPage.tsx
'use client';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { ExtendedRecordMap } from 'notion-types';
import { getPageTitle } from 'notion-utils';
import { NotionRenderer } from 'react-notion-x';
export const NotionPage = ({
recordMap,
previewImagesEnabled,
rootPageId,
rootDomain,
}: NotionPageProps) => {
if (!recordMap) {
return null;
}
return (
<>
<NotionRenderer
recordMap={recordMap}
rootDomain={rootDomain}
rootPageId={rootPageId}
fullPage={false}
previewImages={previewImagesEnabled}
components={{
nextLink: Link,
Code,
Collection,
Equation,
Pdf,
Modal,
}}
/>
</>
);
};
In other words, I think it can be solved by attaching the use client with the server component and the client component well separated.
Sorry for not being able to help.
@Geuni620 my friend I appreciate the time you took to reply to me. Your recommendation resolved my problem.
Thanks so much!
@Geuni620
Hello, do you some how get the next/image or next-cloudinary supported in the new AppRouter?
The components attribute in NotionRenderer
works well in PageRouter but it fetch the raw data link in the new AppRouter.
Description
Notion Test Page ID
Hi there.
Recently, I'm trying to create a blog using Notion.
I want to use react-notion-x, the app directory next.js.
Thank you in advance. 🙇♂️