Link to blocks on the same page dont work in NextJs

[0xFloyd]

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 page

Notion Test Page ID

https://0xfloyd.notion.site/f9a90dd6d2ba4c758192077bcc9f91

[0xFloyd]

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>;
            },
        }}
 />

[mfts]

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>;
              },
            }}
          />