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.
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
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
Top comments (0)