Closed 0xFloyd closed 1 year ago
I tried changing rootDomain
, rootPageId
, and adding <Link/>
to the nextLink
component, but none solved my issue.
As all my pages live at /blog
, I was able to fix by adding a custom PageLink component to NotionRenderer
in NextJS 13:
<NotionRenderer
components={{
PageLink: (props: {
href: any;
children:
| string
| number
| boolean
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
| React.ReactFragment
| React.ReactPortal
| null
| undefined;
}) => {
return <Link href={`/blog/${props.href}`}>{props.children}</Link>;
},
}}
/>
Thanks @0xFloyd for that. I had the same problem and was able to rewrite the component.
Instead of an internal link I disabled all links by converting the PageLink
into a div
I added the className="notion-page-link"
that the link is still styled as intended.
<NotionRenderer
components={{
PageLink: (props: {
href: any;
children:
| string
| number
| boolean
| React.ReactElement<
any,
string | React.JSXElementConstructor<any>
>
| React.ReactPortal
| null
| undefined;
}) => {
return <div className="notion-page-link">{props.children}</div>;
},
}}
/>
Description
I have a ptext block, in which a word links to a footnote at the bottom of the page (another text block). This doesn't seem to work in Nextjs 12 or 13. I've created a codesandbox example by cloning the transitive-bullshit nextjs-notion-starter-kit, and then simply putting my test page in the config file
https://codesandbox.io/p/github/0xFloyd/nextjs-notion-starter-kit/dreamy
The
Lorem^1
at the top of the page has a link to[1] The link above links here
at the bottom of the pageNotion Test Page ID
https://0xfloyd.notion.site/f9a90dd6d2ba4c758192077bcc9f91