Next.js 13: What’s New?

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • vercel

    Develop. Preview. Ship.

  • directory (beta). This includes support for **[layouts](https://nextjs.org/blog/next-13#layouts), [server Components](https://nextjs.org/blog/next-13#server-components), [streaming](https://nextjs.org/blog/next-13#streaming) and [suspense for data fetching](https://nextjs.org/blog/next-13#data-fetching)**. Other new and improved features include[ ** ```next/image``` (stable)** ](https://nextjs.org/blog/next-13#nextimage)- faster with native browser lazy loading, [@next/font (beta)](https://nextjs.org/blog/next-13#nextfont) - automatic self-hosted fonts with zero layout shift and [**improved ```next/link``` **](https://nextjs.org/blog/next-13#breaking-changes) with simplified API with automatic `````` . ### Analytics [Vercel](https://vercel.com/) welcomes [Splitbee](https://splitbee.io/) 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' ](https://vercel.com/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](https://turbo.build/), 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](https://beta.nextjs.org/docs) 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](https://strapi.io/) 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](https://strp.cc/3E27WuI) with ease. Join the [waitlist](https://strp.cc/3E27WuI) 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](https://www.youtube.com/watch?v=wVity_0pUeo)”. ### 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](https://strapi.io/blog) or follow the course “[Create your ”next” app using Strapi and Next.js](https://www.youtube.com/playlist?list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)” 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](https://app.hubspot.com/documents/6893032/view/451374166?accessId=e8198f), which includes the shortcuts for the most commonly used aspects of Strapi with Next.js. Happy coding.

  • turbo

    Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.

  • directory (beta). This includes support for **[layouts](https://nextjs.org/blog/next-13#layouts), [server Components](https://nextjs.org/blog/next-13#server-components), [streaming](https://nextjs.org/blog/next-13#streaming) and [suspense for data fetching](https://nextjs.org/blog/next-13#data-fetching)**. Other new and improved features include[ ** ```next/image``` (stable)** ](https://nextjs.org/blog/next-13#nextimage)- faster with native browser lazy loading, [@next/font (beta)](https://nextjs.org/blog/next-13#nextfont) - automatic self-hosted fonts with zero layout shift and [**improved ```next/link``` **](https://nextjs.org/blog/next-13#breaking-changes) with simplified API with automatic `````` . ### Analytics [Vercel](https://vercel.com/) welcomes [Splitbee](https://splitbee.io/) 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' ](https://vercel.com/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](https://turbo.build/), 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](https://beta.nextjs.org/docs) 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](https://strapi.io/) 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](https://strp.cc/3E27WuI) with ease. Join the [waitlist](https://strp.cc/3E27WuI) 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](https://www.youtube.com/watch?v=wVity_0pUeo)”. ### 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](https://strapi.io/blog) or follow the course “[Create your ”next” app using Strapi and Next.js](https://www.youtube.com/playlist?list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)” 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](https://app.hubspot.com/documents/6893032/view/451374166?accessId=e8198f), which includes the shortcuts for the most commonly used aspects of Strapi with Next.js. Happy coding.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • Strapi

    🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.

  • directory (beta). This includes support for **[layouts](https://nextjs.org/blog/next-13#layouts), [server Components](https://nextjs.org/blog/next-13#server-components), [streaming](https://nextjs.org/blog/next-13#streaming) and [suspense for data fetching](https://nextjs.org/blog/next-13#data-fetching)**. Other new and improved features include[ ** ```next/image``` (stable)** ](https://nextjs.org/blog/next-13#nextimage)- faster with native browser lazy loading, [@next/font (beta)](https://nextjs.org/blog/next-13#nextfont) - automatic self-hosted fonts with zero layout shift and [**improved ```next/link``` **](https://nextjs.org/blog/next-13#breaking-changes) with simplified API with automatic `````` . ### Analytics [Vercel](https://vercel.com/) welcomes [Splitbee](https://splitbee.io/) 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' ](https://vercel.com/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](https://turbo.build/), 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](https://beta.nextjs.org/docs) 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](https://strapi.io/) 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](https://strp.cc/3E27WuI) with ease. Join the [waitlist](https://strp.cc/3E27WuI) 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](https://www.youtube.com/watch?v=wVity_0pUeo)”. ### 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](https://strapi.io/blog) or follow the course “[Create your ”next” app using Strapi and Next.js](https://www.youtube.com/playlist?list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)” 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](https://app.hubspot.com/documents/6893032/view/451374166?accessId=e8198f), which includes the shortcuts for the most commonly used aspects of Strapi with Next.js. Happy coding.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts