Add SaaS integrations to Next.js with Xkit

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

Sections

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

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:

```javascript
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:

```javascript
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.

```javascript
<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:

```javascript
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.

Become an integrations expert.

Stay up to date on the latest articles about native integrations, new
Xkit features, and more by signing up for our mailing list.

Organization-wide Access with Google and Microsoft

Introducing Xkit's new Google Service Account and Microsoft Admin connectors