Next.js Conf 2024: Make it Work - Make it Right - Make it Fast 🚀

Next.js Conf is one of the annual highlights for developers and tech enthusiasts. This year, the event took place in San Francisco - and online - on October 24. A diverse mix of developers and innovators came together to learn what Next.js will deliver next. One thing is certain: the framework remains one of the most popular and influential in web development.

Next.js Conf 2024 was all about the motto: "Make it Work - Make it Right - Make it Fast". The Next.js team impressively demonstrated how these principles guide their work and how developers can benefit from them. In the keynote, it became clear that Next.js is ready to move from the "Make it Work" phase to the "Make it Right" phase with the App Router. Simplifications in caching and self-hosting clearly demonstrate this. The introduction of Turbopack also marked the start of the "Make it Fast" phase.

Make it Work: React Server Components and the App Router

With the new rendering strategies made possible by the App Router and React Server Components, Next.js has become more flexible - but unfortunately also more complex. This complexity initially dampened the enthusiasm of the students in our CAS Advanced Frontend Engineering, but the potential of these new strategies quickly became clear.

The Next.js team emphasized in the keynote that the current focus is on simplifying what already exists and making it more accessible.

Make it Right: Getting started without hurdles

The new standard of dynamic rendering makes it possible to bring an idea to life quickly. No lengthy configuration, no unexpected caching issues - just get started. If targeted caching is required in a part of the app, this can now be activated more easily and explicitly with the new caching APIs.

Advantages of the new caching APIs

The new caching APIs use cache, cacheTag and cacheLife make caching in Next.js easier and more powerful:

• use cache: Reduces the complexity of caching by explicitly defining the caching logic. It works not only for the fetch API, but also for components, database queries and functions.
• cacheLifeDefines the cache validity period, which optimizes performance without reloading data unnecessarily often.
• cacheTagAllows the targeted invalidation of cache entries without rebuilding the entire cache - particularly useful for data-intensive applications.

These mechanisms offer more control over data caching and optimize the developer experience - the only catch is that the APIs are still in the testing phase.

Make it Right: Error messages, but the right way

Cryptic and unclear error messages are often a major source of frustration for developers. The app router of Next.js was no exception, and the infamous hydration error without specifying the cause of the error was feared in the React community.

Next.js wants such error messages to be a thing of the past. Instead, there are now clear and helpful hints to help developers quickly understand and solve the problem. "Make it Right" here means making the development process as intuitive and fluid as possible so that you can focus on what's important: improving your code.

The hydration error now shows the exact location where the error occurs. The Next.js team goes one step further and provides tips on how to improve the code when bad patterns are detected, including a possible solution. This even saves developers from having to consult the documentation in some cases.

Make it Right: No lock-in

Next.js wants to ensure that developers are not tied to a specific infrastructure. At Next.js Conf 2024, some significant improvements in the area of self-hosting were presented that make exactly that possible.

The team has extensively revised the documentation on self-hosting, paying particular attention to aspects such as caching, image optimization and multi-container setups. These improvements make it much easier to host Next.js on your own servers.

Next.js 15 also greatly simplifies the configuration of the cache handler. Developers can easily replace the default in-memory cache with custom cache solutions such as Redis. These new capabilities apply to both the Pages and App Router architectures and provide full support for all caching functions, including ISR and use cache.

Another highlight is the switch to the Sharp image optimization library, which is now available to self-hosting users as standard. Sharp combines fast installation times with high storage efficiency, which significantly improves performance in self-hosting.

In addition, the default settings for cache control headers have been updated to make it easier for developers to customize them. Support for the Node.js runtime for middleware is now also better integrated, which was a frequent request for self-hosting.

Open source and community integration

The aim of Next.js is to improve the entire ecosystem and share the knowledge gained with the community. The newly introduced GitHub community repository serves as a central point of contact for templates, deployment examples and community adapters to further simplify the entry into self-hosting. Next.js wants to ensure that the framework can be used independently of a specific infrastructure, and the team actively supports the open exchange of knowledge and best practices.

Make it Fast: Performance that inspires

This is where Turbopack comes into play. Turbopack is now officially available for local development and promises huge performance improvements, especially for large web applications. Turbopack offers up to 96% faster code updates and reduced compilation times.

One highlight is the Persistent cache. Even after a restart of the development server, the cache is retained so that the development cycles can continue almost seamlessly. This means: no constant recompiling of the entire application - only the actual changes interest the compiler. Regardless of the size of the project, the development environment remains fast and responsive.

It will also be exciting when Turbopack, as announced, is used for builds and deployments in the near future and brings this speed boost into production.

Final thoughts

Next.js Conf 2024 has impressively demonstrated how the framework and the team behind it not only tackle complex problems, but also have the commitment to continuously improve the developer experience. From making it easier to get started to better tools for iteration to impressive speed, Next.js 2024 makes developers' lives easier, more productive and more enjoyable. It's about breaking down barriers and getting the best out of every idea.

So, what are you waiting for? Time to try out the new features and write your own "Make it Work - Make it Right - Make it Fast" story!