5 simple steps to use pricmic.io with Nx and Next.js
Tags: vercel, react, development, technology
Published: 2023-02-13 15:35:15

---
title: 5 simple steps to use pricmic.io with Nx and Next.js
published: true
date: 2022-10-13 20:10:14 UTC
tags: vercel,react,development,technology
canonical_url: 
---

For my [brand new website](https://weshipit.today/) I wanted to use prismic as I do on my [personal website](https://davidl.fr/blog). Both are Next.js project, the prismic documentation is pretty neat, so what could go wrong?

![](https://cdn-images-1.medium.com/max/1024/1*njsn4MFA_XzM4wbMCKWw5Q.jpeg)
_A rare picture of a monorepo by @clembazard on Unsplash_

**The problem** I am using Nx — _an awesome tool for handling monorepo complexity_ — and the folders architecture is not really what expect the new slicemachine feature from prismic.

```
# What I have

./apps/weshipit/next-*.files
./node_modules/
./package.json

# What slicemachine want

./next-*.files
./node_modules/
./package.json
```

Here are 5 simple steps to solve this problem.

#### Create manually the types on Prismic

As I said using slicemachine is tricky in a monorepo. I am not the only one who [is struggling with that](https://community.prismic.io/t/slicemachine-in-monorepo/10579).

If I use npm run slicemachine —after the setup— at the root level. I encountered issues.

If I use npm run slicemachine —after the setup— at project level. I encountered issues.

So I decided to…

🥁

Create new repository with “another framework” — because slicemachine does not plays well with Nx architecture.

![add a framework on prismic.io](https://cdn-images-1.medium.com/proxy/1*33fqAPnLyn0bch4rPErPnw.png)
_add a framework on prismic.io_

And choose plain React.

Don’t panic we are going to use SRR feature from Next.js later in this article.

![Select React.js](https://cdn-images-1.medium.com/proxy/1*OktrUiIGX1C6n1gGp-FSIA.png)
_Select React.js_

Finally, manually create your new type.

![](https://cdn-images-1.medium.com/proxy/1*NUU_1H0kOQHBEZ1vD6rLKw.png)

#### Install Prismic to your Nx monorepo

Run this command in your terminal to install the Prismic React integration and client library

```
yarn add @prismicio/react @prismicio/client
```

Create your API client

```
// ./apps/weshipit/pages/api/prismic.ts

import * as prismic from '@prismicio/client';

// Fill in your repository name
export const repositoryName = 'weshipit';

export const client = prismic.createClient(repositoryName, {
  routes: [
    {
      type: 'client',
      path: '/',
    },
  ],
});
```

We want to have the PrismicProvider component available in our entire project by updating \_app.tsx

```
// ./apps/weshipit/pages/_app.tsx 

import { AppProps } from 'next/app';
import Head from 'next/head';

import { PrismicProvider } from '@prismicio/react';
import { client } from '../prismic';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <PrismicProvider client={client}> <------- add this
      <Head>
        <title>weshipit.today — React Native Experts</title>
      </Head>
      <main>
        <Component {...pageProps} />
      </main>
    </PrismicProvider>
  );
}

export default CustomApp;
```

#### Create a local /api

Following Next.js the documentation

> Any file inside the folder pages/api is mapped to /api/ and will be treated as an API endpoint instead of a page.

That’s what I created to get my data to render the list of my clients.

```
// apps/weshipit/pages/api/client.ts

import { client as prismicClient } from './prismic';

export async function getAllClients() {
  try {
    const clients = await prismicClient.getAllByType('client');

    return {
      clients: clients ? clients : [],
    };
  } catch (error) {
    console.error('getAllClients -> error', error);
    return error;
  }
}
```

#### getInitialProps and render data to your page

I can pull the data to render [my clients page](https://weshipit.today/clients).

```
// apps/weshipit/pages/clients.ts

export default function ClientsPage({ clients }: clientsPageProps) {
  return (
    <div>
      {clients.map((client) => (
        <div key={client.id}>
          <Text>{client.data.name}</Text>
        </div>
      ))}
    </div>
  );
}

ClientsPage.getInitialProps = async function () {
  const clients = await getAllClients();
  return clients;
};
```

#### Release to prod

The last step is releasing to production. Using vercel on the project settings page you will need to override build settings.

Build command

```
npx nx build weshipit --prod
```

Output directory

```
dist/apps/weshipit/.next
```

![](https://cdn-images-1.medium.com/proxy/1*wsPM0srbvqBpbNj940tEFg.png)

This is not perfect, but it’s working and [weshipit.today](https://weshipit.today/)