We’re excited to introduce @prismicio/next: an integration between Prismic and Next.js to make your developer experience smoother. 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.

Our New Next.js Library Is Now in Beta

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.

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.

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. 

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. 

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.

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.

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.

Open an issue explaining your application's setup and the bug you're encountering.

Open an issue explaining your improvement or feature so we can discuss and learn more.

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.

Whether you're just starting out as a freelance developer, or you're leading an agency, you'll find something useful in our free pitch deck template.

Start Pitching the Jamstack to Clients

Whether you're just starting out as a freelance developer, or you're leading an agency, you'll find something useful in our free pitch deck template. We took expert interviews with Prismic's agency users and turned their savvy insights into the foundation for an awesome pitch. We've sprinkled tips and resources throughout the speaker notes to put you on the path to success while keeping the design minimal so that you can quickly brand it on the fly.

Let us know when you land your next client [link-social]over on Twitter!

Don't forget to check out The Easiest Way to Add a CMS to Next.js!

As with every Next.js Conf, there were announcements about what to expect for the future of the framework. Here are just some of the highlights that stuck out to me from their announcement.

3 Key Takeaways from Next.js Conf

Vercel just hosted their Next.js Conf and, as always, it's a reminder that it's a great time to be a Next.js developer. This was my first time speaking at Next.js Conf, and I hope I get an opportunity to be a part of the hype again next year!

There were so many great sessions; it was hard to choose what I wanted to attend. Fortunately, everything is still available through the conference website, where you can find individual sessions on each speaker's page. I'm definitely going to be revisiting some of these talks.

Of course, as with every Next.js Conf, there were announcements about what to expect for the future of the framework. Here are just some of the highlights that stuck out to me from their announcement.

The first announcement was about their new Rust compiler, which they built on top of swc (a JavaScript compiler, kind of like Babel).

This update is going to make hot module reloading 3x faster and builds 5x faster, making our experience as Next.js developers even better. And the best part is that we'll all benefit without making any updates to our code.

For me, this performance improvement is good news on the CMS front as well. One concern about using CMSs, like Prismic, in the Jamstack space is handling thousands upon thousands of pages during build time. Knowing that Next 12 is going above and beyond to be as performant as possible makes me more confident it's nothing to be worried about.

Next.js 12 now gives us a lot more flexibility internally with middleware. Middleware allows you to run code before a request is completed. This will make dynamically managing requests much easier. For example, it helps with customizing content for certain countries on your website by checking geolocation within middleware, so you can let people know that shipping might not be allowed for a location or perhaps something is "coming soon" to an area.

I'm sure there are tons of scenarios where middleware can make a difference. Vercel has shared a number of examples over on their website. I'm expecting to see some really creative solutions to some of the problems we have to solve today.

Vercel also announced their plans to integrate with React 18, meaning we can expect some support for server-side components!

This is exciting for us on the Dev Exp team at Prismic, and we're already thinking about ways this implementation can improve how we build our Slices. Theoretically, Slice-specific data fetching could happen within the component rather than being passed all the way down the tree with getStaticProps. We'll be keeping an eye out for the React 18 implementation to assess how we can adapt to those changes in the future.

I couldn't catch all of the talks, but I'd like to highlight some talks that seemed really interesting to me:

Prismic had an awesome cameo in the session about how Monogram built out a new website and web portal for MacStadium. Getting an inside look at this project was cool because of the innovative way Monogram used Slices (and Prismic as a whole). Among other things, they implemented a new take on the versatility of Slices by creating several design themes for each one. With these themed Slices in hand, MacStadium rapidly diversified its design across numerous pages.

Nader Dabit gave a high-level breakdown on how Web 3 works, what it is, where it's going, how it's being used, and the tools around building decentralized apps. A big takeaway from his talk was how a lot of the crypto space has a huge focus on community. Things like NFTs (Non-Fungible Tokens) and DAOs (Decentralized Autonomous Organizations) are pushing the web to be a more open place. There is a lot to unpack from his talk that I can't summarize here, I highly recommend watching it when you can.

I've been hearing nothing but amazing things about Supabase for a long time now. I also caught wind of the funding they've been getting, which is really impressive considering that they're fully open source. Supabase is an open-source Firebase alternative that handles everything from authentication to PostgreSQL databases, instant APIs, and more. The team works very closely with Vercel and does everything they can to make sure the developer experience is seamless.

I'd love to think more about what a Prismic and Supabase integration might look like, especially for handling something like authentication. Being an e-commerce focused person, I have some ideas for projects around collecting payments or subscriptions to see certain content on the Jamstack.

Again, there were so many talks to choose from and so much more I could have listed my highlights. I'm definitely going to be spending some time heading back to the Next.js Conf site to catch up on what I missed while sessions ran in parallel. Overall, it's a really great time to be a Next.js developer. I'm really looking forward to seeing how Vercel and Next.js pave the way for the future of the web.

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

Nick DeJesus

Our New Next.js Library Is Now in Beta

Start Pitching the Jamstack to Clients

3 Key Takeaways from Next.js Conf 2021

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