Upgrade to v6 for mixed website

Developing with Prismic
1

I'm using Prismic for several components on my website such as blogs, "static" pages and homepage and I have several other type of pages that have nothing to do with Prismic. In v5 I configured Prismic to be only included in the pages that requires prismic functionality. The setup instructions for v6 however states that I need to include the PrismicProvider and PrismicPreview in _app - that would bloat some pages unnecessarily.

Has anyone solved this issue?

3

Hello Peter,

Thanks for reaching out to us.

You can omit <PrismicProvider> and <PrismicPreview> from _app.js if you want. They should be included on any page that uses Prismic, and they must be at the top-level of your page. _app.js is recommended because it is the top-most level of the Next.js app. All pages, including its layout, text, links, etc., will be wrapped with <PrismicProvider> and <PrismicPreview> if it is in _app.js.
You could add <PrismicProvider> and <PrismicPreview> to the page components directly.
It will look something like this:

import { PrismicProvider } from '@prismicio/react'
import { PrismicPreview } from '@prismicio/next'
import Link from 'next/link'

export default function AboutPage() {
  return (
    <PrismicProvider
      internalLinkComponent={({ href, ...props }) => (
        <Link href={href}>
          <a {...props} />
        </Link>
      )}
    >
      <PrismicPreview repositoryName="your-repo-name">
        <div>Your page content</div>
      </PrismicPreview>
    </PrismicProvider>
  )
}

Let me know if you have any other questions.

Thanks,
Priyanka

4

Hi Priyanka,

Thanks for the suggestion. This is what i came up yesterday as well and it worked. The docu is a bit hazy about the actual need of the Provider. After having read 10+ different pages and examples I concluded that the Provider's purpose is to set a few defaults such as the linkresolver, internalLinkComponents, etc which are then uised by the components such as RichText. I got the impression that that is all what it does and if I define those directly in the component, I would actually not need the Provider. Is this correct?

Another thing I still need to implement is how to not include the Preview in prod, but only in test and dev. This was easily doable in the old version, but in the new version i need to rethink this as I don't want the page to include the code at all. Any thoughts on this?

Thanks,
Peter

5

Hello Peter,

Sorry for the delayed reply.

My colleague Angelo suggested that there isn't a built-in way to do that today. It is possible, however, to write some custom code that does that.

A custom <PrismicPreview> component could be used in place of <PrismicPreview>:

// components/NonProductionPrismicPreview.js

import { PrismicPreview } from "@prismicio/next";

export const NonProductionPrismicPreview = (props) => {
	if (process.env.NODE_ENV === "production") {
		return props.children || null;
	}

	return <PrismicPreview {...props} />;
};

Then in pages/_app.js , use <NonProductionPrismicPreview> in place of <PrismicPreview>:

// pages/_app.js

import type { AppProps } from "next/app";

import { NonProductionPrismicPreview } from "../components/NonProductionPrismicPreview";
import { repositoryName } from "../prismicio";

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<NonProductionPrismicPreview repositoryName={repositoryName}>
			<Component {...pageProps} />
		</NonProductionPrismicPreview>
	);
}

The /api/preview and /api/exit-preview API endpoints won't affect bundle size, so they don't need to be removed in production. If preview functionality needs to be disabled completely, each API endpoint could check for process.env.NODE_ENV and not run the preview-specific functions (like setPreviewData() and redirectToPreviewURL() )

Thanks,
Priyanka