DEV Community

David Leuliette 🤖
David Leuliette 🤖

Posted on • Originally published at flexbox.Medium on

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

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
Enter fullscreen mode Exit fullscreen mode

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.

add a framework on prismic.io
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
Select React.js

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
Enter fullscreen mode Exit fullscreen mode

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: '/',
    },
  ],
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Output directory

dist/apps/weshipit/.next
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)