--- title: "@prismicio/next - v1" category: "api-references" audience: developers lastUpdated: "2025-11-06T01:07:50.000Z" --- # Overview `@prismicio/next` is the official Prismic package for creating web apps with Prismic and [Next.js](https://nextjs.org/). # Dependencies and requirements This package can only be used in a Next.js project. It relies on `@prismicio/client`, `@prismicio/helpers`, and `@prismicio/react` as peer dependencies. > Are you using Next v12 or lower? > > `@prismicio/next` v1 is compatible with Next.js 13 and later. > > If you are using Next.js 12, [see the `@prismicio/next` v0.1 docs](https://prismic.io/docs/technical-reference/prismicio-next.md). # Installation ## Install packages Add `@prismicio/next` and its peer dependencies to your Next.js project via the command line: ```bash npm install @prismicio/next @prismicio/client ``` ## Create an optional link resolver Create a link resolver function. This is one of two ways to tell Next.js how to handle internal links in Prismic documents. (The other way to do so is with a route resolver, which works better for more complex routes. [Read a comparison](https://prismic.io/docs/route-resolver.md).) ```tsx export function linkResolver(document) { if (document.type === "post") { return "/blog/" + document.uid; } return "/"; } ``` ## Add `` to your app Add support for Prismic Previews to your Next.js app by adding the `` component to the root of your app. This component adds the Prismic Toolbar and registers event listeners to react to the toolbar’s events. Here’s an example of setting up the component: * **App Router:** ```tsx filename=src/app/layout.tsx import { PrismicPreview } from "@prismicio/next"; import { repositoryName } from "@/prismicio"; export default function RootLayout({ children }) { return ( {children} ); } ``` * **Pages Router:** ```tsx filename=src/pages/_app.js import { PrismicPreview } from "@prismicio/next"; import { repositoryName } from "@/prismicio"; export default function App({ Component, pageProps }) { return ( ); } ``` More information about `` is provided below. ## Create preview routes Create two routes to handle previews: `/api/preview` and `/api/exit-preview`. `/api/preview` starts Next.js [Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode) when using the App Router or [Preview Mode](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode) when using the Pages Router. It also redirects content writers from Prismic to their previewed document’s webpage. Create the route with the following file: * **App Router:** ```tsx filename=src/app/api/preview/route.js import { redirectToPreviewURL } from "@prismicio/next"; import { createClient } from "@/prismicio"; /** * @param {import("next/server").NextRequest} request */ export async function GET(request) { const client = createClient(); return await redirectToPreviewURL({ client, request }); } ``` * **Pages Router:** ```tsx filename=src/pages/api/preview.js import { setPreviewData, redirectToPreviewURL } from "@prismicio/next"; import { createClient } from "@/prismicio"; export default async (req, res) => { const client = createClient({ req }); await setPreviewData({ req, res }); await redirectToPreviewURL({ req, res, client }); }; ``` `/api/exit-preview` ends Next.js Draft Mode or Preview Mode when content writers end their preview session. Create the route with the following file: * **App Router:** ```tsx filename=src/app/api/exit-preview/route.js import { exitPreview } from "@prismicio/next"; export async function GET() { return await exitPreview(); } ``` * **Pages Router:** ```tsx filename=src/pages/api/exit-preview.js import { exitPreview } from "@prismicio/next"; export async function handler(req, res) { return await exitPreview({ req, res }); } ``` # Usage ## `` ```tsx import { PrismicNextImage } from "@prismicio/next"; ``` A custom [`next/image`](https://nextjs.org/docs/api-reference/next/image) React component that renders an optimized image from a Prismic image field. ```html ``` It automatically forwards the image’s URL and dimensions to `next/image`. It accepts all `next/image` props except `src`. If the image field is empty, the component will render `null` by default. Use the `fallback` prop to render a custom value when a field is empty. ```html The field is empty!

} /> ``` The image CDN which Prismic serves all images through, [imgix](https://imgix.com/), allows image transformations using URL parameters. imgix URL parameters can be provided to `` using the `imgixParams` prop. ```html // Renders a grayscale image ``` See [imgix's Image URL API Reference](https://docs.imgix.com/apis/rendering) for a full list of what's available, including saturation changes, cropping, and blurring. By default, `` uses a Prismic-specific imgix [`next/image` loader](https://nextjs.org/docs/api-reference/next/image#loader). Most apps will not need to change the default loader. To use Next.js’s built-in [Image Optimization API](https://nextjs.org/docs/api-reference/next/image#built-in-loaders), provide `loader={undefined}` to the component. ```html // Use Next.js's built-in Image Optimization API ``` Like the base `next/image` component, [custom loaders](https://nextjs.org/docs/api-reference/next/image#loader) can be provided to the `loader` prop. ```html // Use a custom loader ``` Image transformations made via the `imgixParams` prop will be applied before passing the image URL to the loader. The component automatically applies the image field’s alt text to the rendered `` element. To customize the alt text, use the alt prop. ```html ``` To provide a fallback alt text to be used if the image field does not contain alt text, use the `fallbackAlt` prop. ```html ``` The `alt` and `fallbackAlt` props only accept an empty string (`''`) to let you [declare an image as decorative](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images). Any other value is invalid. See the [“`alt` must be an empty string”](https://github.com/prismicio/prismic-next/blob/master/messages/alt-must-be-an-empty-string.md) article for more details. ## `` ```tsx import { PrismicNextLink } from "@prismicio/next"; ``` A custom `next/link` React component that renders a link from a Link field or Prismic document. It accepts all `next/link` props except `href`. ```tsx // With a link field // With a link field and custom children Click me! // With a Prismic document Click me! ``` It automatically forward’s the link’s URL and `target` attribute to `next/link`. Links to external URLs will automatically include `rel="noreferrer"`. This behavior can be overridden using the `rel` prop. ```tsx // Set an explicit rel in all cases