Client side navigation with Nextjs + Builder

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
dc5c96804c6c4a068e9558f30660aaee

What are you trying to accomplish
I’m using Nextjs (with appDir) and I’ve noticed that the links that Builder generates always lead to a hard navigation, as opposed to the links that Nextjs generate using the Link component. These lead to client-side (soft) navigation. Is there a way to get the same client site navigation experience using Builder instead of the hard navigation?

Code stack you are integrating Builder with
Nextjs with appDir

Reproducible code example

  • go to https://new.sachini.co.uk
  • Go to the bottom of the page and click on the button Fashion (/category/fashion). This does a hard navigation by reloading the page.
  • Now go to the top menu, and click on beauty (/category/beauty). This menu has been created using the Link component of Nextjs allowing for soft navigation.

Hi @vperrin,

NextJS appDir is currently an experimental feature, and we are working on supporting this soon.

Hi @manish-sharma,

Thanks for getting back to me.
I should have been more specific.
While I’m using the appDir directory, the behaviour is exactly the same using the pages directory.

Thanks,
Vincent

Hi @vperrin,

Could you be able to share your nextJS routing code?

Hi @manish-sharma ,

Thanks for getting back to me. My front-end code uses the default component from ‘next/link’.

I have found a solution to have the same behaviour with Builder components by registering the component as a custom component in Builder, see code below. It works like a charm! It also means that all the pages are automatically prefetched when they become visible in the viewport.

Best,
Vincent

import { Builder, withChildren } from '@builder.io/react';  // import withChildren
import Link from 'next/link';
import { memo } from 'react';

const SoftLink = props =>
    <Link href={props.url ?? '/'}>{props.children}</Link>

// pass your custom component to withChildren()
const SoftLinkWithBuilderChildren = withChildren(SoftLink)

// specify defaultChildren when you register the component
Builder.registerComponent(SoftLinkWithBuilderChildren, {
    name: 'Soft Link',
    inputs: [{
        name: 'url', type: 'text', defaultValue: '/s/new-in',
    }],
    // Adding defaults is important for easy usability
    defaultChildren: [
        {
            '@type': '@builder.io/sdk:Element',
            component: { name: 'Text', options: { text: 'I am child text block!' } }
        }
    ]
})

export default memo(SoftLink)
1 Like