Next.js has become a dominating force in the React ecosystem. If you’re launching a Prismic site today as a React developer, it’s very likely that you’ll be considering Next.js as your go-to framework. The team at Prismic is eager to look for ways to support our users and their ecosystems.
That’s why we’re excited to introduce @prismicio/next: an integration between Prismic and Next.js to make your developer experience smoother.
One of the most important features in a typical development workflow is being able to preview your sites before launch. Prismic already supports previews with Next.js; however, we’re using this library as a way to standardize the setup process, with more improvements planned for the future.
Prismic Previews before
In the past, setting up Prismic Previews on a Next.js project required quite a lot of work. You had to:
- Add a script tag to add the Preview Toolbar to the project.
- Write your own hooks to trigger preview mode or exit Preview mode based on event listeners from the Preview Toolbar.
- Write some logic that would check for Preview data cookies to determine if Preview mode should be triggered or not (in order to support shareable preview links).
Setting up Previews the old way was very tedious, especially if you were an agency that primarily used Prismic for your clients.
Prismic Previews now
Now @prismicio/next will provide a <PrismicPreview /> wrapper that handles integrating the Prismic Toolbar and triggering Preview events accordingly. All of the work mentioned above is taken care of by simply wrapping your app in the new component we provide.
This library is currently in beta and will be for the next month. We want to use this time to evaluate usage and gather feedback that might need to be addressed sooner than later (more on how you can join in below!).
The code below shows how you’d use <PrismicPreview /> with your Next.js projects. It takes care of adding the Prismic Toolbar and providing the hooks to update depending on Toolbar events.
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { PrismicPreview } from '@prismicio/next'
// Import the repository name you set up in your Prismic settings file
import { repositoryName } from 'prismicio.js'
function MyApp({ Component, pageProps }: AppProps) {
return (
<PrismicPreview repositoryName={repositoryName}>
<Component {...pageProps} />;
</PrismicPreview>
);
}
export default MyApp;All you’d have to do is take a couple more steps, and you’d be good to go. If you’re ready to give this new library a try, you can jump over to our documentation for all of the details.
This is only the beginning
We decided to go with supporting Previews first as the MVP for this beta release because it was a low-hanging fruit that would make a significant impact on our users. It doesn’t stop here, though. We’d love to continue supporting more features that are native to Next.js in the future, especially if it’s going to make our users more effective with their work. We’re eager to get feedback, talk about your needs, and put together a plan of action to take this library to the next level.
How to give feedback or report bugs
If you have any questions or run into issues with @prismicio/next, please feel free to reach out for help with the methods below. Gathering your feedback is a crucial part of this beta period because it gives us a chance to discuss requests, comments, or issues users may have and come up with the best way to approach future releases.
❓ Ask a question
Open a new topic on our community forum with your question explaining what you want to achieve. Our support team will get back to you shortly.
🐛 Report a bug
Open an issue explaining your application's setup and the bug you're encountering.
💬 Suggest an improvement
Open an issue explaining your improvement or feature so we can discuss and learn more.
🧑💻 Submit code changes
For small fixes, feel free to open a pull request with a description of your changes. For large changes, please first open an issue so we can discuss if and how the changes should be implemented.
We’re so excited for the launch of @prismicio/next! As is, it already does a lot to save our users time and allow them to focus on delivering top-tier web experiences instead of boilerplate. We’ll be paying close attention to feedback from our community as well as updates from Next.js to ensure that we’re optimizing wherever we can. It will only keep getting better from here.
