Next.js 13: What’s New?

We can all agree that Next.js Conf 2022 has been the biggest and most exciting conference this year. With great announcements concerning the future of the web and newly released features. We certainly are looking forward to all that is to come.

It’s been an absolute pleasure that we at Strapi have had the opportunity to sponsor and be a part of a vibrant ecosystem, pushing the boundaries of innovation. Also, I have had the pleasure of expressing my passion for Next.js as a speaker at Next.js Conf 2022. Here’s a recap of the great things to look forward to.

Next.js 13

Vercel Released Next.js 13 at Next.js Conf. Next.js 13 introduces some significant changes, with a focus on reducing the amount of client JavaScript required to run Next.js apps. The biggest feature is the routing and layouts in Next.js with the introduction of the app/ directory (beta). This includes support for layouts, server Components, streaming and suspense for data fetching.

Other new and improved features include next/image (stable) - faster with native browser lazy loading, @next/font (beta) - automatic self-hosted fonts with zero layout shift and improved next/link with simplified API with automatic <a>.

Analytics

Vercel welcomes Splitbee to provide all Vercel customers with greater analytics capabilities. With Splitbee's all-in-one analytics and privacy-friendly conversion tool, you can quickly improve your website by better understanding how users interact with it—enabling developers to access real-time analytics for their site and experiment with A/B testing (soon).

Brands of all sizes can now obtain the in-depth website analytics they need to have more control over how they interact with their end users thanks to Vercel analytics' addition of page views and visitor data. Features include:

• Privacy Friendly
• Real-time tracking
• Accessible to all

Turbopack

The goal of Vercel is to provide innovators with the speed and dependability they need to produce at the exact moment of inspiration by speeding bundling for the Web, starting first with Next.js 13. With that, they’ve launched Turbopack, a Rust-based successor to Webpack.

Turbopack is based on an innovative incremental design to provide the quickest development experience possible. It refreshes huge applications 10x quicker than Vite and 700x faster than Webpack. On larger applications, the gap is significantly greater—often 20x faster than Vite. Turbopack will be used for the Next.js 13 development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more.

Integrate Next.js with Strapi

With all those exciting features to try out, why not try them out on your next Strapi and Next.js project!? Strapi enables the creation, management, and delivery of content-rich experiences to any digital product, channel, or device. While Next.js can be used to create progressive web apps, server-rendered apps, and static websites. Why else should you choose Strapi with Next.js?

• High Security: You have no need for a server-side language
• Best Developer Experience: Next.js is built on React, and so is Strapi. You can choose your favourite stack to build a microservices architecture.
• Scalability to infinity: You have unlimited usage and can scale as you grow with Strapi and Next.js.

Another exciting reason is that you will soon be able to easily deploy your Strapi app to Strapi Cloud with ease. Join the waitlist and be the first to have a taste of a stress-free deployment process.

If you are looking for more inspiration on why you should build a Next.js app with Strapi, do check out my recent talk, given at Next.js Conf 2022 about “Why I chose Next.js for my Strapi Application”.

Get Started with Strapi and Next.js

Learn how to create your own Next.js applications that use Strapi APIs to retrieve and manage content. The best way to get started with Strapi and Next.js is to visit our blogs for the latest tutorials or follow the course “Create your ”next” app using Strapi and Next.js” by Tamas.

Don’t have time or are too busy to start learning how to use Next.js and Strapi? Find one of our starter projects by downloading our Next.js X Strapi Cheatsheet, which includes the shortcuts for the most commonly used aspects of Strapi with Next.js. Happy coding.