Client Side Routing

Technical Questions
, ,
2

Hi @Deyvid Welcome to the Builder.io forum!

Builder.io’s integration with Next.js does support client-side routing, allowing you to create a Single Page Application (SPA) that leverages Builder.io’s components. However, you might need to handle client-side navigation with custom components or tweak the default behavior to ensure smooth client-side transitions.

Client-Side Routing in Next.js

Next.js provides built-in support for client-side routing with the <Link> component from next/link. To use this with Builder.io content, you can integrate the custom link component into your Builder components.

Using Custom Components for Client-Side Navigation

Builder.io allows you to define custom components, which you can use to set up client-side navigation using Next.js’ <Link> component. This approach ensures you have control over how links behave in your SPA.

Step-by-Step Guide:

  1. Set Up Next.js with Builder.io:
    If you haven’t already, initialize your Next.js app and integrate Builder by following the integration guide.

  2. Create a Custom Link Component:
    Create a custom link component that uses Next.js’ <Link> component for client-side navigation.

    // components/CustomLink.js
import Link from 'next/link';

const CustomLink = ({ href, children, ...props }) => {
  return (
    <Link href={href}>
      <a {...props}>{children}</a>
    </Link>
  );
};

export default CustomLink;

  3. Register the Custom Link Component in Builder:
    Register CustomLink with Builder.io so it can be used within the Visual Editor.

    // builder.js
import { Builder } from '@builder.io/react';
import CustomLink from './components/CustomLink';

Builder.registerComponent(CustomLink, {
  name: 'CustomLink',
  inputs: [
    { name: 'href', type: 'url', required: true, friendlyName: 'URL' },
    { name: 'children', type: 'string', friendlyName: 'Text' },
  ],
});

  4. Use CustomLink in Builder.io:

    • In the Builder.io Visual Editor, you can now use the CustomLink component to create links.
    • Drag the CustomLink component into your pages or sections and set the URL and text properties.

Ensuring Client-Side Routing:

  • Ensure your Next.js page and API routes are correctly configured.
  • Ensure that your app shell (layout) remains consistent and does not completely reload on client-side navigation. This can be configured in your _app.js or _app.tsx.

Full Example Integration:

  1. pages/_app.js:

    import { Builder } from '@builder.io/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

  2. pages/index.js:

    import { builder, BuilderComponent } from '@builder.io/react';
import CustomLink from '../components/CustomLink';

builder.init('YOUR_BUILDER_API_KEY');

export default function Home({ page }) {
  return (
    <div>
      <CustomLink href="/page2">Go to Page 2</CustomLink>
      <BuilderComponent model="page" content={page} />
    </div>
  );
}

export async function getStaticProps() {
  // Fetch the Builder content
  const page = await builder.get('page', { url: '/' }).toPromise();
  return {
    props: {
      page: page || null,
    },
  };
}

  3. pages/page2.js:

    import { builder, BuilderComponent } from '@builder.io/react';

builder.init('YOUR_BUILDER_API_KEY');

export default function Page2({ page }) {
  return (
    <div>
      <h1>Page 2</h1>
      <BuilderComponent model="page" content={page} />
    </div>
  );
}

export async function getStaticProps() {
  // Fetch the Builder content
  const page = await builder.get('page', { url: '/page2' }).toPromise();
  return {
    props: {
      page: page || null,
    },
  };
}

Summary

With Builder.io’s integration with Next.js, client-side routing in a SPA is supported, but it may require custom components for client-side navigation. By creating and registering custom link components, you can fully leverage Next.js’s client-side routing capabilities while using Builder.io to manage and create content dynamically.

For more details, refer to:

1 Like