@stnew/prismic-nextjs

@stnew/prismic-nextjs

@stnew/prismic-nextjs has peerDepenendencies of react, react-dom, and next. This package assumes you have a basic Next.js app running and have integrated the Prismic client.

This package exports:

• PrismicLink - A wrapper for next/link that handles link resolution.
• urlResolver from @stnew/prismic (npm)
• PrismicContext, PrismicProvider, SliceZone, usePrismic, useHtmlSerializer, serializeElements from @stnew/prismic-react (npm)

PrismicLink

The PrismicLink component will take a Prismic link fragment and generate an anchor tag. It's using linkResolver and hrefResolver under the hood, so if you links are not working make sure that you have those set up correctly.

import { PrismicLink } from '@stnew/prismic-nextjs'

function NavItem({ link, label }) {
  return (
    <li>
      <PrismicLink link={link}>{label}</PrismicLink>
    </li>
  )
}

Prop	Required	Type	Description
link	Yes	PrismicDoc fragment	Resolves urls for Prismic "Link" fields
as	No	React Component or string	Renders the a tag as another React component, useful for libraries like styled-components
urlObject	No	UrlObject	Transforms URL object and appends it to the URL, useful for things like query strings. This won't work on external links.

Styling PrismicLink

If you're using a css-in-js library like styled-components, you might be wondering how you can style a PrismicLink.

There are a few ways which we've outlined in this doc, for brevity.