Next.js 14 announced at Next.js Conf : What’s new?

Vercel has just launched Next.js 14 during their fourth annual conference, and it's full of improvements that make it faster and easier to use. Of course, Strapi’s team was here and a proud sponsor of the event, so we wanted to report back to you. Let's look at the main updates from the Next.js Conference and understand what that means for your Strapi project.

Key updates in Next.js 14

Vercel calls Next.js 14 their “most focused release." What does this mean for you? Instead of adding new features, the Next.js team has made their existing tools better. Guillermo Rauch, who started Next.js and is the CEO of Vercel, proudly announced that Next.js 14 doesn't have any new APIs.

Boosting Performance

The main goal has been to speed things up. The team has improved Turbopack, their compiler built with Rust. This has made the local server on vercel.com start 53% faster and refresh up to 94% quicker when code changes are made. However, remember that Turbo isn't fully ready yet. To see how it's doing, there's a website called "Are we Turbo Yet?" where you can check out how well it's performing in tests.

Making things simpler

They also worked on making things easier. They've introduced an experimental feature known as "Partial Pre-rendering." You might ask, "What's different about this from other rendering methods we know?" It's still being tested, but you can try it by turning it on in your configuration file. The goal is to make Next.js simpler for developers.

By using what's called Suspense component boundaries, the system can tell which parts of your app change and which stay the same. It prepares the parts that don't change as HTML and only updates the parts that do change when necessary. This blends the best aspects of both static and dynamic rendering methods.

Stable Server Actions

Additionally, focusing on simplicity, the Next.js team has made Server Actions a stable feature. This means you can set up a function on the server and trigger it from the client side, like when someone clicks a button or submits a form. This is basically a remote procedure call (RPC), similar to tRPC, but it's built into Next.js, making it easier for developers to use.

New Next.js learning course

To help developers learn and advance with Next.js, they've updated the API reference documentation and improved search results on their learning platform. The new course teaches you the basics of Next.js, as well as how to use the App Router, Server components, Server Actions, Authentication, and how to incorporate a Postgres database into your Next.js project..

Using Strapi with Next.js 14

If you are curious to see how this project can also be built with Strapi and Next 14, check out this demo project that is based on the above Next JS course. It uses Strapi to power its backend instead.

The project is simple to set up and lets you experience the benefits of combining Next.js with Strapi.

Strapi helps you build a separate API with a full admin panel. If you're looking to reduce development time, get to market quicker, or need a comprehensive backend admin panel for your team to manage content, Strapi is a good choice.

In the repository, you'll find instructions on implementing all the Next.js features with Strapi:

• Full CRUD Functionality
• Pagination and Search
• Authentication
• Registration
• Middleware for protected routes
• Using Next Cookies

Project Repo

Checkout this video that covers project overview and setup

More Next.js 14: Vercel's leap into AI

Another exciting development from Vercel is about AI. Jared Palmer, who leads AI at Vercel, talked about how Next.js's streaming features are great for AI that generates content. He introduced Vercel's new AI SDK, which makes it easy to work with different large language models (LLMs).

Conclusion

Next.js 14 is all about refining what is already there for developers, rather than piling on more complexity. The enhancements to speed, rendering, and server actions are all focused on streamlining your workflow. And with Vercel's new AI SDK, we're moving towards a future where AI and web development are increasingly integrated.

Stay tuned to Strapi, as we will continue to update you on these developments and support you as the field of web development evolves. Here's to creating amazing things together!