# Client Side Routing

**URL:** <https://forum.builder.io/t/client-side-routing/6026>\
**Category:** Technical Questions\
**Tags:** react, feature, nextjs\
**Created:** [July 21, 2024, 10:13pm UTC](https://forum.builder.io/t/client-side-routing/6026 "2024-07-21T22:13:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deyvid](https://avatars.discourse-cdn.com/v4/letter/d/f14d63/32.png) [@Deyvid](https://forum.builder.io/u/Deyvid)\
**Post date:** [July 21, 2024, 10:13pm UTC](https://forum.builder.io/t/client-side-routing/6026/1 "2024-07-21T22:13:04Z")

</div>

**What are you trying to accomplish**  
Does the [builder.io](http://builder.io) integration with NextJS support client-side routing out of the box with the ready components?  
If I want to make a SPA does that mean I have to create all the links in it as custom components and I can’t use the out-of-the-box components?

I am new to [builder.io](http://builder.io), I am sorry if this is covered somewhere or if I am missing something and it is a dumb question.

**Code stack you are integrating Builder with**  
NextJS

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [July 22, 2024, 3:22pm UTC](https://forum.builder.io/t/client-side-routing/6026/2 "2024-07-22T15:22:49Z")

</div>

Hi @Deyvid Welcome to the [Builder.io](http://Builder.io) forum!

[Builder.io](http://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](http://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](http://Builder.io) content, you can integrate the custom link component into your Builder components.

### Using Custom Components for Client-Side Navigation

[Builder.io](http://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](http://Builder.io)**:  
If you haven’t already, initialize your Next.js app and integrate Builder by following the [integration guide](https://www.builder.io/c/docs/integrating-builder-pages).

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

3. **Register the Custom Link Component in Builder** :  
Register `CustomLink` with [Builder.io](http://Builder.io) so it can be used within the Visual Editor.

4. **Use CustomLink in [Builder.io](http://Builder.io)**:

### 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** :

2. **pages/index.js** :

3. **pages/page2.js** :

### Summary

With [Builder.io](http://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](http://Builder.io) to manage and create content dynamically.

For more details, refer to:

- [Integrating Pages](https://www.builder.io/c/docs/integrating-builder-pages)
- [Custom Components](https://www.builder.io/c/docs/custom-components-setup)
- [Next.js Link Component](https://nextjs.org/docs/api-reference/next/link)