SvelteKit meets Prismic: Power up with new Slice Machine features for faster web development.

Build Websites with Prismic and SvelteKit

🚀 Our latest release gives developers the speed of SvelteKit with the power of Prismic!  

SvelteKit joins Next.js and Nuxt as Prismic’s officially supported website frameworks.  

Prismic’s latest Slice Machine features — including page types, Slices shared across content types, and Slice screenshots — are now supported in SvelteKit projects.

SvelteKit is a modern web application framework that uses Svelte, a compiler for reactive JavaScript UIs. Think of it as an alternative to Next.js with React.
Learn more about SvelteKit and Svelte at their official websites:

SvelteKit: https://kit.svelte.dev/
Svelte: https://svelte.dev/

With integrations for Next.js, Nuxt, and SvelteKit, Prismic can be used with the web’s three major UI frameworks: React, Vue, and Svelte.

Learn how to use SvelteKit with Prismic, what’s supported in this first version, and what we plan to add in the future below.

You can start a new SvelteKit website with Prismic in just a few steps:

Log in to Prismic or create a new account.

Create a new Prismic repository using the new SvelteKit option.

Select the “Minimal” or “Full website demo” starter—choose to start from scratch.

After giving your repository a name, follow the @slicemachine/init installation instructions.

Running @slicemachine/init in your new project automatically detects your SvelteKit project and gives you:

A Prismic repository — Create a new repository or connect to an existing one.

A Prismic client — Query content from your Prismic repository using @prismicio/client.

Prismic’s Svelte SDK — Render your Prismic content in Svelte using @prismicio/svelte.

Slice Machine — Model your website’s content.

In this initial release, Slice Machine can manage your SvelteKit website’s Slices, page types, and custom types, along with the following features:

Slice Simulator — Develop your Slices’ design in an interactive environment.

Component generation — Bootstrap your Slice’s code as soon as you create them.

Code snippets — Quickly develop Slices and pages using templated code.

In future updates, we will bring full feature parity with our Next.js and Nuxt integrations, including:

Previews — Let your content writers preview their content before publishing.

Guided documentation — Learn best practices to build websites with Prismic and SvelteKit.

Follow @prismicio on Twitter to know when we release updates.

Today’s release marks just the start of a deep integration between Prismic and SvelteKit.

Please let us know if you come across any bugs while using Slice Machine or have any feature requests through GitHub.

Submit a bug report or feature request on GitHub

SvelteKit support is new and in active development. During this time, please submit development questions to the @prismicio/svelte GitHub repository, and we’ll do our best to help.

We’re excited for the Svelte community to join Next.js and Nuxt Prismic developers, and we hope you are too.

Gatsby and Prismic v6 will be the last major version to be released by Prismic. Documentation can now be found in the plugins’ GitHub repository.

Gatsby + Prismic v6: Faster and Simpler

Gatsby is a website framework designed to build fast React-based websites. Prismic’s Gatsby plugins work great. They provide:

Today, we’re releasing a new version of our Gatsby integration, Version 6.

The new version includes the following updates:

🦾 A complete rewrite to simplify the plugins’ underlying code

Most projects can be upgraded in less than an hour.

Gatsby + Prismic v6 will be the last major version to be officially released by Prismic. Documentation for Prismic’s Gatsby plugins has moved from the Prismic Docs website to the plugins’ GitHub repository.

For more details on what this change means for you and your projects, see Our future plans for Gatsby + Prismic below.

Prismic plugins are now compatible with Gatsby 5

Gatsby 5 includes a number of improvements and optimizations that make building better websites even easier than before. Take advantage of Gatsby’s new Head API, Script component, and Slice API (not to be confused with Prismic’s Slices!) once you update.

Note: `gatsby-plugin-prismic-previews` does not currently support Gatsby’s Partial Hydration feature, currently in beta.

Prismic previews in Gatsby sites are now quicker

Previewing content while writing is crucial to many content writers’ workflow. A fast feedback loop leads to quick iterations and a shorter time to publish.

Prismic previews in Gatsby sites are now quicker, especially when previewing from Prismic repositories with many documents (think: >500 documents). `gatsby-plugin-prismic-previews` uses a new strategy that minimizes the amount of Prismic documents fetched during a preview session, leading to shorter loading times.

Code from `gatsby-plugin-prismic-previews` is now only loaded during a preview session. That means all of your website’s visitors won’t need to download code that only content writers need for previewing.

The new plugins have been rewritten from the ground up not only to improve performance but also to make it simpler to understand and contribute to.

If you ever ran into a bug with the previous versions and jumped into their code to debug it, you’ll know it wasn’t the most intuitive code to read. The new versions avoid clever code making it easier for everyone in the Gatsby + Prismic community to work on the plugins together.

As always, pull requests to improve the plugins or fix bugs are always welcome!

First, update your project to Gatsby 5 (see the official migration guide).

Finally, update your project’s code to be compatible with the latest changes. The Gatsby + Prismic V5 to V6 Migration Guide walks you through each step.

View the Gatsby + Prismic V5 to V6 Migration Guide

Today, we are releasing new versions of our Gatsby plugins: `gatsby-source-prismic` and `gatsby-plugin-prismic-previews`.

Over the next two months, we will provide support to fix bugs in the new plugins and help developers upgrade their projects.

After that time, we plan to reduce our support and encourage the Gatsby + Prismic community to help maintain the plugins. We will continue to review and guide community contributions to the plugins.

We recommend building new React-based websites using Next.js rather than Gatsby going forward. We see more innovation from the Next.js team and believe simpler, more stable websites can be built with Next.js when compared to Gatsby. Our Next.js support is stronger than ever, with full support for the App Router, TypeScript, and Slice Machine.

If you have any questions about the updated plugins or our plans to reduce official support for Gatsby, please post them the Prismic Community forum.

Learn the best, most up-to-date way to develop Next.js websites with Prismic, the Next.js App Router, and React Server Components.

How to use Prismic with the Next.js App Router [Tutorial]

The Next.js App Router and React Server Components, two recently released innovative features, are great tools to build websites with Prismic.

The Next.js App Router introduces simple patterns to build fast, maintainable websites. It makes it easy to create global layouts, handle fine-grained dynamic URLs, and fetch data efficiently. The Next.js App Router is the successor to the Pages Router you may already be familiar with.

React Server Components unlock a whole new set of possibilities for frontend apps. As the name suggests, Server Components are rendered on the server and do not send any JavaScript to the browser. They simplify data fetching and lead to more concise code.

The App Router is built upon Server Components, providing an exceptionally good development experience.

In this tutorial, you’ll learn the best, most up-to-date way to develop Next.js websites with Prismic, the Next.js App Router, and React Server Components.

This tutorial expects some familiarity with Prismic, Next.js, and React. If you are new to any of those tools, check out the following introductions.

Prismic: Crash Course with Next.js
Next.js: What is Next.js?
React: Learn React

If you would like to see the finished project, check out the links below:

Live Demo: https://nextjs-tutorial-app-router.vercel.app/

GitHub: prismicio-community/nextjs-tutorial-app-router

To begin, create a new Next.js app using create-next-app.

Use all of the default options when asked. The app will be configured with the following settings:

TypeScript (If you aren’t familiar with TypeScript, don’t worry! The code will look a lot like normal JavaScript.)

Next, run `@slicemachine/init` in your app’s directory to install and configure Slice Machine, the tool used to manage Prismic content models.

You’re going to use Tailwind CSS’s default styles, but you’ll need to configure it to read your Slice component files. Add `src/slices` to Tailwind CSS’s `content` option.

`@slicemachine/init` created a `prismicio.ts` file for you, which will be used to query content from Prismic. You’ll need to make a couple of changes in the file to support the App Router:

Move `prismicio.ts` into the `src` directory: `src/prismicio.ts`.

Add the following `fetchOptions` parameter to the `createClient()` function.

Finally, start your app’s development server, which you’ll use throughout the rest of the tutorial.

You’re going to need some Prismic content to play with before you can create your first page.

You would normally use Slice Machine to create custom types and Slices and configure them with fields. We’re focusing on just the Next.js App Router for this tutorial, so let’s skip that step and automate some of that work.

If you aren’t familiar with Slice Machine and how to model content, you may want to check out the Model Content guide before continuing. That guide will help you understand the steps you are skipping.

In a new terminal, run the following `npx` scripts to add Homepage, Page, and Settings custom types to your project.

You’ll come back to these custom types in a bit.

Next, create a couple of Slices that you’ll be using in your website’s pages. Remember, Slices are website sections that can be used interchangeably, like an Image Gallery or Call to Action. You’ll be creating a Hero and Text Slice for this tutorial.

You can run this script to add the Hero Slice to your project and skip a few steps like before.

Once the script is complete, open `src/slices/Hero/index.tsx` and paste in the following code.

Notice we’re using components from `@prismicio/react` and `@prismicio/next`. Both packages work seamless in the App Router and React Server Components.

`<PrismicNextLink>`: Renders Prismic link fields using `next/link`.

`<PrismicNextImage>`: Renders Prismic image fields using `next/image`.

`<PrismicRichText>`: Renders Prismic rich text fields as React components.

Like the Hero Slice, you can run this script to add the Text Slice to your project and skip a few steps.

Once the script is complete, open `src/slices/Text/index.tsx` and paste in the following code.

Next, you’ll be adding some content in Prismic, creating a route for your homepage, and viewing it in your app.

Before writing code and seeing your homepage on screen, you’ll need to add some content to your Prismic repository.

Open https://prismic.io/dashboard and select the repository you created.

Create a new Homepage document and enter some sample content.

Add a few Slices so you can test out the Slice components you added in the previous step.

Back in your code, open `src/app/page.tsx` and paste in the contents below. This file defines the homepage of your app and queries for your Homepage document in Prismic.

If you are familiar with developing pages in the Pages Router, you’ll appreciate how much simpler code is in the App Router.

This component uses `async`/`await` and `@prismicio/client` directly in the component. It’s clear exactly where the `homepage` data is coming from.

It also uses the `<SliceZone>` component, which takes the Homepage’s Slice Zone and renders its components. Your Slice components can be Server Components for the best performance, or Client Components when interactivity is needed. `<SliceZone>` handles both.

Lastly, notice the `generateMetadata()` function. This function sets the page’s title and `<meta>` tags.

With example content in Prismic and your page coded, you should now be able to access your homepage.

Open your homepage: http://localhost:3000

You should see your homepage content, along with a properly set title and description `<meta>` element.

Your homepage works well on its own, but most apps will need a global header and a footer around each page’s content. Adding a layout with a global header and footer is simple with the App Router.

Just like you did in the previous step with your Homepage, open Prismic and create a new document—a Settings document this time.

Enter some sample content into each of the fields. Then, save and publish the document.

Back in your code, open `src/app/layout.tsx` and paste in the contents below. This component will automatically wrap all pages in your app.

Notice how you can query for data—the Settings document in this case—directly in the component, just like you did in the homepage. Server Components make it easy to fetch data directly where you need it.

If you’re worried about fetching the same data more than once across your app, don’t be! Next.js automatically detects duplicate network requests and reduces them to one, and then caches them to prevent any future requests.

Check out your homepage again to see if everything worked.

You should see your homepage content surrounded by the layout component you just created. Any pages added in the future will also include the layout.

Prismic is most powerful when it can manage all of a site’s pages. Luckily, that’s easy to accomplish in the App Router.

The App Router supports dynamic routes, which lets you create one file to handle many pages.

Create a directory at `src/app/[uid]`. The `[uid]` name is what allows us to support unlimited pages.

Within that directory, create a file named `page.tsx` and paste in the code below. This file defines the page’s component, just like you did with the homepage’s `page.tsx` file.

This component looks nearly identical to your homepage, with the exception that it uses the `uid` parameter from the URL. The `uid` parameter is used to fetch a specific Page document from Prismic.

This page also serves a 404 Not Found page when a Prismic document for a given `uid` parameter doesn’t exist.

Now that the app is ready for unlimited pages, go ahead and create some in Prismic.

Give the page a UID. The page’s UID determines its URL, like `/about` or `/contact`.

Enter some content into the fields. Remember to add some Slices!

Create at least two pages so you can see that any page you create will work.

Each of your pages should be accessible using their UIDs as their URL.

For example, if you created a page with a UID of `about`, its URL is: http://localhost:3000/about

You should see each page’s content along with the layout you set up previously.

Previewing draft content before publishing is crucial to content management; it lets content writers experiment with and verify content before it becomes public. Luckily, adding support for previews is simple with Prismic and the App Router.

Prismic Previews require the Prismic Toolbar and a framework integration to work. `@prismicio/next` provides all the code you need in a simple `<PrismicPreview>` component.

Add the component to your global layout in `src/app/layout.tsx`.

A small bridge is needed between Prismic and your Next.js website to support previews. You can connect Prismic and your website by creating two Route Handlers:

`/api/preview`: Enters Next.js Draft Mode and redirects content writers from Prismic to their previewed document’s webpage.

`/api/exit-preview`: Exits Next.js Draft Mode when content writers end their preview session.

First, create the `/api/preview` Route Handler:

Create a directory at `src/app/api/preview`.

Within that directory, create a file named `route.ts` and paste in the code below.

Then, create the `/api/exit-preview` Route Handler:

Create a directory at `src/app/api/exit-preview`.

You’ll need to tell Prismic your app’s URL in order to preview content. Since you are working locally for now, you’ll use `http://localhost:3000`.

Open the settings page using the gear icon in the bottom left corner.

Fill out the fields with these values:
Site Name: Development
Domain: `http://localhost:3000`
Preview Route: `/api/preview`

It’s time to try out a preview! Go to one of your pages, edit some of the content, and hit Save.

Before publishing, click the 👁 eye icon to the right of the Publish button.

A new tab should open showing that document’s page, now with your edited content.

You can even edit your content and see it update in your preview as you save. Go back to Prismic, make another edit, and save. You should see your edit appear in your app automatically without refreshing the page.

When you’re done playing with previews, publish your changes.

Your app is configured to cache all Prismic queries indefinitely for the best performance. However, you’ll want to fetch new content after you publish documents in Prismic.

In this last step of this tutorial, you’ll set up on-demand revalidation to do exactly that: Prismic will be configured to call one of your app’s endpoints to clear Next.js’ network cache upon content changes.

On-demand revalidation won’t have an effect until you deploy your app. If you don’t plan to deploy your app, you can skip this section.

Create a `/api/revalidate` Route Handler:

Create a directory at `src/app/api/revalidate`.

Once your app is deployed and has a public URL, you’ll need to create a Prismic webhook pointed to the `/revalidate` endpoint.

Fill out the fields with these values:
Name of the Webhook: Next.js on-demand revalidation
URL: Your app’s deployed URL + /api/revalidate (example: https://example.com/api/revalidate)
Triggers: Only check “A document is published” and “A document is unpublished”

You can test everything is working by publishing an edit to a document and viewing its page on your deployed website. You should see your changes reflected practically immediately after publishing.

Let's recap the benefits of using Prismic with the Next.js App Router

We covered all of the basics you need to use Prismic with the Next.js App Router in this tutorial. With the App Router, it’s never been simpler to create fully-featured Next.js websites with Prismic:

Querying content is as easy as creating a Prismic client and calling a query.

Rendering content is streamlined using components from `@prismicio/react` and `@prismicio/next`.

Supporting content previews and query caching are just a couple of files away.

Developing websites with the App Router is not only a simpler experience but a more powerful one as well when compared to the Pages Router. In addition to what you learned in this tutorial, the App Router and React Server Components allow you to:

Fetch third-party data directly in components.

Render quick, interactive elements alongside expensive server-rendered ones.

Create dynamic Open Graph images using JSX, just like pages.

We recommend using the App Router over the Pages Router when building new Next.js websites to take advantage of these new possibilities.

If you have any questions, please do not hesitate to post in the Prismic Community forum. See you there! 🙂

Tutorial: How to use Prismic with the Next.js App Router

Prismic supports the Next.js App Router through updated React and Next.js integrations. Next.js App Router is a new addition to the Next.js library that makes it simpler to route your application using React components.

Use the Next.js App Router with Prismic Today

Next.js 13.4 introduces a new way to write web apps called the App Router, which we now support with our React and Next.js packages.

The App Router includes significant new features, including React Server Components support, `async`/`await` data fetching, streaming with Suspense, and more. Your app’s code can be more concise and more performant than before.

We recommend building new Prismic websites using the App Router and migrating existing ones as soon as you are able to.

Prismic and Slice Machine support Next.js App Router.

You can provide feedback on GitHub: `@prismicio/react`, `@prismicio/next`.

The App Router, also known as the `app` directory, enables you to build Next.js apps using simpler, more powerful patterns compared to the traditional Pages Router. Layouts, metadata, and complex routing are now just a file or `const` declaration away.

Best of all, the App Router has simplified data fetching dramatically. Common Next.js patterns like `getStaticProps()` have been removed in favor of fetching data directly in components.

The App Router uses React Server Components by default. Server Components let you render components on the server—and only on the server—without sending any JavaScript to the browser. This increases performance and lets you write server-only code that you previously could not, like calling databases and using secret keys.

These features build on top of the existing React techniques developers know, and they can be adopted incrementally. You can still write interactive Client Components and use your favorite third-party libraries in the App Router.

Updated Prismic support for the App Router

Prismic supports this new way of building Next.js applications if you use Slice Machine and the latest versions of our packages.

Be sure to use at least these versions of the Prismic packages when using the App Router:

`@prismicio/next` also now includes `<PrismicNextLink>`, a straightforward way to render links from Prismic with no configuration required.

These package updates are backward compatible with Next.js apps using the Pages Router. Update now so you’re ready when you migrate to the App Router.

Prismic’s documentation includes guides on using both the App Router and Pages Router. Technical References for each package are also available.

Prismic Documentation: Next.js and Prismic

We’d love to hear your feedback on the updated Prismic packages.

If you come across a bug, feel something is weird, or have an idea for an improvement, please share it with us on GitHub.

If you have any questions on how to develop with Prismic, ask on the Prismic Community forum.

Prismic Community: Developing with Prismic

Lastly, let us know how your experience with the App Router and Prismic went by posting your project in our Showcase channel.

Have fun building with the App Router and Prismic! 🚀

We’re excited to announce the Prismic Early Access Program — a new program that gives developers first access to Prismic’s latest features, tools, and product updates.

Prismic Early Access Program

Through this program, you will be able to share insights, tell us about bugs you’ve encountered, and shape the roadmap toward a better product right from the start. This is your chance to influence Prismic and build a better developer experience for you and others.

As we work on new projects, such as framework integrations and new developer tools, you’ll have the opportunity to join early testing groups along with other Prismic developers.

Each test group, or “cohort,” will have a specific focus and will be given step-by-step guides on what to test. Through the testing process, you’ll be able to let us know what’s broken, feels weird, or, maybe, is exactly what you were looking for.

Each cohort will have its own schedule depending on what is being tested. Most cohorts will only take a few hours of your time over the course of several weeks. This gives you time to test the new features according to your schedule and allows us time to fix issues and implement suggestions.

You’ll be able to join periodic video calls to discuss what was tested, share feedback, and give overall impressions. We understand not everyone can join a video call at a given time, so recordings will be made available to the cohort privately.

Bug reports, feature requests, and general feedback will be shared through a private GitHub repository for most cohorts. This lets you and others track the status of your feedback.

In addition to feedback shared over GitHub, you’ll also have access to a private Slack channel where you can chat with other Early Access Program developers about Prismic, what you’re testing, or web development in general.

Developers from Prismic will also be in the channel if you have any pressing questions. 🙂

Each cohort will be announced here on the Prismic Blog, on Twitter, and in our Community Newsletter (sign up form below), along with a form to apply. You’ll just need to submit your name and some details about yourself to apply.

Angelo Ashmore

Build Websites with Prismic and SvelteKit

Gatsby + Prismic v6: Faster and Simpler

Tutorial: How to use Prismic with the Next.js App Router

Use the Next.js App Router with Prismic Today

Prismic Early Access Program

Early Access Program: Gatsby Refresh 2022

Tutorial: All The Basics You Need to Try React Server Components

6 Ways Slice Machine Empowers Developers to Build Better Websites

Better Prismic Previews with Next.js

The Easiest Way to Add a CMS to Next.js

How to Implement a Scalable CMS with Slices

Build Better Next.js Sites with On-demand Incremental Static Regeneration

Updated JavaScript Client and Helpers

New React Library Beta

Gatsby + Prismic v5

Gatsby 4x4: Four mini-talks about Gatsby 4

Gatsby + Prismic v4.0 Release

Our plans for a better Gatsby integration

Deliver a website with a visual Page Builder for your marketing team