5 simple steps to use pricmic.io with Nx and Next.js

3 min readOct 13, 2022

For my brand new website I wanted to use prismic as I do on my personal website. Both are Next.js project, the prismic documentation is pretty neat, so what could go wrong?

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.

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.

And choose plain React.

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

Finally, manually create your new type.

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.

// 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

This is not perfect, but it’s working and weshipit.today

5 simple steps to use pricmic.io with Nx and Next.js

Create manually the types on Prismic

Install Prismic to your Nx monorepo

Create a local /api

getInitialProps and render data to your page

Release to prod

Written by David Leuliette

Create a local `/api`

`getInitialProps` and render data to your page