As part of Prismic's first Release Week, we're excited to announce some new developer tools to help you write code faster, create fewer bugs, and ship performant sites.
We're introducing big improvements for TypeScript, more powerful and performant images in Next.js, and snippets to speed up your workflow.
Read about all of these improvements, below, and on Thursday, join us for a live demo of everything over on our YouTube channel (make sure to RSVP)!
TypeScript tooling
We're big fans of TypeScript here at Prismic. We know how much types improve the developer experience, helping you write code faster and ship fewer bugs. That's why we're proud to announce a new way to automatically generate types for your Slices and Custom Types. As a bonus, JavaScript projects will benefit from these, too!
prismic-ts-codegen
Our new CLI tool, prismic-ts-codegen, generates types for your Custom Types and Slices. It integrates with other Prismic TypeScript libraries, making it easy to generate and update types by running a single CLI command.
Generating your types with prismic-ts-codegen takes only three steps.
- Create a config file by running
npx prismic-ts-codegen init. - Tell
prismic-ts-codegenwhere your Slice and Custom Type models are. - Run
npx prismic-ts-codegen.
Read the full directions over in the Prismic documentation.
Just like that, types for all of your Slices and Custom Types get created in a single file at the root of your project. Then just run npx prismic-ts-codegen whenever you need to update them.
While this is especially good news for developers using TypeScript, you don't need to use TypeScript to benefit from these types! Next, I’ll show you how we’ve improved the Prismic Client to make these types useful for everyone.
Prismic Client - automatic types
We've updated the Prismic Client to automatically use the types that prismic-ts-codegen creates. This means the data you get back from Prismic will benefit from autocomplete and in-editor documentation, making it easier than ever to know the shape of your data.
No more console logging to find your way around and much less debugging.
As I said, this isn't just for TypeScript users. If your entire project is written in JavaScript, you'll still benefit!
To benefit from automatic types, you need to:
- Use
prismic-ts-codegento generate types in your project. - Upgrade
@prismicio/clientto at least versionv6.6.1.
To learn more about this feature, check out the documentation.
Improved Next.js images
Images on Prismic have the power of imgix baked in, allowing for effortless transformations. By passing simple values you can change things like the quality, format, cropping, contrast, and saturation, or even add text to your image.
Next.js's image component, next/image, offers some fantastic benefits of its own by improving performance, preventing layout shift, and enabling faster page loading.
When building with Next.js and Prismic, you shouldn't need to choose between imgix's flexibility and next/image's performance. So we created a component to give you the best of both.
<PrismicNextImage>
With the new <PrismicNextImage> component, you can render optimized images using next/image and Prismic's built-in imgix integration.
Here’s a quick example where I’m I'm using imgix transforms to set the image quality to 90% and add a cool duotone effect.
<PrismicNextImage
field={image}
imgixParams={{ q: 90, duotone: ['071859', 'FA8072'] }}
layout="fill"
/>Note that <PrismicNextImage> takes the entire image field from Prismic, not just the image's URL. This way the component can access the alt, width, and height and can use those accordingly.
To try it out, upgrade @prismicio/next to version v0.1.3 or higher.
Write code faster
Snippets are like a cheat code for getting your work done faster. To help you build your components we've created Prismic snippets for VSCode, Vim, Sublime, and IntelliJ. They cover React and Vue, as well as regular JavaScript and TypeScript.
Prismic Snippets
To use them, type prismic and the name of the snippet you want. For example, start typing prismicRichText and hit "tab" to instantly get <PrismicRichText field={doc.data.field} /> in a flash.
Not only do you get standard components like <PrismicLink>, but you also get the scaffolding for things like the HTML Serializer, Route Resolver, and Slice Simulator.
We hope these snippets help you build your projects faster and with less effort.
Check out Prismic Snippets on GitHub for all the download links.
Open source
When Developer Experience Engineer, Lucie Haberer, created Prismic Snippets, she quickly realized that each IDE required a different format for snippets.
So to make the process easier, Lucie created a tool that converts Markdown into snippets for VSCode, Vim, Sublime, and IntelliJ. Now, we’re open-sourcing that tool to give back to the community. We hope you find it useful for building and releasing your own snippets.
To learn all about the tool, Schnipsel, check out this blog post that Lucie put together to share her journey.
Live demo
This Thursday we're going to be doing a live demo of everything mentioned here. We'll take a Prismic and Next.js project and show you how to update it to use the new tools we detailed here.
It'll be over on our YouTube channel at 12 PM ET. RSVP here to get notified when we go live!
Only the beginning
That covers some of the new and updated packages we're releasing this week, but only scratches the surface of our whole offering.
- Monday - Start exploring our tech releases through this blog post!
- Tuesday - We'll be unveiling what's new and improved around Prismic's community and education.
- Wednesday - Find out why it's a great time to be a freelancer or agency building with Prismic. We’ll also announce some new Prismic features at the monthly Prismic Product Meetup.
- Thursday - Join us for the Prismic Release Week Meetup. We’ll host a live stream where we demonstrate how to upgrade your site to the new tools, and show how nice the improvements are! We’ll also detail all the other releases coming out this week. Make sure you sign up for that event on Luma.
