Being Framework agnostic

[loick]

Is your feature request related to a problem? Please describe.

I'm working on a monorepo with several apps, and having a dedicated adapter to a specific framework is not flexible enough for me.

Describe the solution you'd like

Right now, I'm using (mainly) nextJS with the new prismic adapter. I migrated all of the methods using "prismicio/next" from my CMS package I created in order to be as agnostic as possible. I'm still using two remaining methods from this package that I would like to get rid of (to stick to nodeJS / React but not to nextJS):

• redirectToPreviewURL
• PrismicPreview

Also, when I create a new slice because of the next adapter, I get an index file using 'next/dynamic'. I would like to be able to stick to a classical export components file without any relationship with nextJS as well.

Obviously I would like to keep the same features (previews etc.).

Do you have any idea on how to achieve this?

Thanks!

[lihbr]

Hey Loïck, thanks for contributing!

You can disable Next-specific lazy-loading within your slicemachine.config.json through your adapter options:

{
  "repositoryName": "...",
  "adapter": {
    "resolve": "@slicemachine/adapter-next",
    "options": {
      "lazyLoadSlices": true
    }
  },
  "libraries": [ /* ... */ ]
}

More on that here: https://prismic.io/docs/technical-reference/slicemachine-adapter-next?version=0.1#usage

I'll let @angeloashmore get back to you on the preview-specific nitty gritty~

[loick]

Nice indeed, good catch, I didn't see this option. 👍

Now only the preview stuffs remain

[angeloashmore]

Hey @loick,

Previews will likely require some framework-specific code since previews affect how you query for content. Content querying is typically framework-specific when using the most performant method.

In Next.js, for example, you would need to use Preview Mode in the Pages Router or read cookies() in the App Router. In both cases, there wouldn't be a framework-agnostic way to integrate previews unless you fetched all of your content on the client, which we do not recommend.

That being said, here are the tools you have available to implement previews:

Next.js (@prismicio/next) (docs)

• enableAutoPreviews(): configures a Prismic client to automatically query content based on previewData, an API Route request, or an App Router request.
• redirectToPreviewURL(): Resolves the URL of the document being previewed and redirects an API Route or Route Handler to that URL.
• <PrismicPreview>: Adds the Prismic Toolbar to your website and adds event hooks to support automatic content refreshes as content is saved in Prismic. The automatic refreshing uses Next.js-specific functions.

React (@prismicio/react) (docs)

• <PrismicToolbar>: Adds the Prismic Toolbar to your website using a client-side useEffect(). Prefer using a framework's script loading integration, like Next.js' next/script or Gatsby's <Script>, as they can optimize script loading better than a vanilla <script>.
• usePrismicPreviewResolver() hook: A client-side hook that resolves the URL of the document being previewed and redirects the browser. This function should only be used in client-rendered apps.

JavaScript/TypeScript (@prismicio/client) (docs)

• client.resolvePreviewURL(): Resolves the URL of the document being previewed.
• client.enableAutoPreviewsFromReq(): Accepts an Express-like or Web API Request and automatically queries previewed content if an active preview session is detected.
• client.queryContentFromRef(): Configures the client to query content from an explicit ref, which you may extract from a requests's URL parameters or cookies.
• client.getToolbarSrc(): Returns a URL for the Prismic Toolbar. This URL can be passed to a framework's specific implementation of <script>, such as next/script.

This repository, @prismicio/react, is designed to be agnostic for any React application. @prismicio/next is more specific and designed to work only in Next.js applications. @prismicio/client is the most general of the three and is designed to be agnostic for any JavaScript project.

Let me know if you have any questions!

[loick]

Hi, and thanks for your answer!

Related to previews, I guess the code could be generic to accept any frameworks. For example, this component basically depends more on router methods than Next / Nuxt right?