Add SaaS integrations to Next.js with Xkit

Oct 27, 2020

Tutorial for using the Xkit integration catalog in a Next.js app

At Xkit, we've long been fans of Vercel since its early days as Zeit. So when we had a few customers want to use Xkit in Next.js apps, we were happy to oblige. But since Next.js does things a little bit differently than a standard React app, our instructions didn't quite cut it.

So today we launched our Next.js Sample app using an Xkit embedded catalog. You can take a look at the open source repo or the live site hosted on Vercel. Feel free to clone the project, add your own Xkit domain, and use it as a starting point for your own Next.js app.

Xkit Catalog embedded in a Next.js App Xkit Catalog embedded in a Next.js App

How it works

Here's what's happening in the app:

To use the embedded catalog React component, we do a dynamic import to only render it on the client. While xkit.js and xkit-catalog.js may eventually include native SSR support, for now they work only in the browser, so we need to exclude them from Next.js SSR:

const XkitCatalog = dynamic(
  () => import('@xkit-co/xkit-catalog.js').then(mod => mod.App),
  { ssr: false }
)

We also need to import createXkit so we can create our instance. Again, we only want to run this in the browser:

import { createXkit } from '@xkit-co/xkit-catalog.js'
const xkit = process.browser ? createXkit(process.env.NEXT_PUBLIC_XKIT_DOMAIN) : undefined

Now we're ready to use our component! In this example, we render our library on the index.js page. If it was on another page, we could adjust the rootPath attribute to reflect the current page.

<xkitcatalog xkit="{xkit}" connectorspath="/" hidetitle=""></xkitcatalog>

You'll notice we also set the connectorsPath to /. This means that when visiting a specific connector, like Clubhouse, the path will be /clubhouse. So we can create another Next.js page to render the right connector when visiting that page. In our example, we created [slug].js with the following contents:

import Home from './index'
export default Home

Since our index.js already renders the catalog, we can let the catalog use its current slug to determine which connector to render.

Wrap-up

That's it! We now have a fully functioning Next.js app using Xkit's embedded catalog. And with the xkit instance we just created, we can use the full xkit.js functionality, including creating a user session, connecting apps, and retrieving access tokens or API keys.

If you're building a Next.js app and embedding Xkit, let us know! We'd love to highlight some users to showcase what's possible.

Building CRM integrations?

Xkit delivers deep integrations for every CRM with one build.

Get access ▶