During the last few days, there has been a lot of talk about NextJS 13 and the news it brings after its update. Thanks to this powerful React framework, we can create single-page JavaScript applications easier and with incredible results.
NextJS offers many advantages for both clients and developers, especially in terms of performance and speed. With the updates’ arrival, those advantages increased, so we will review the new features it has for us.
What’s new in NextJS 13?
You’ve probably read that NextJS 13 will be a game-changer for developers and users. However, until now, its innovations have been shown superficially, so today, we will explain the main changes that the framework brings.
Initially, many users focused their attention on experimental features and believed that version 13 was unstable. However, NextJS 13 can be safely upgraded from its previous version and will work with great stability if you don’t use the experimental APIs.
Let’s review each of the novelties this update brought without further ado.
Experimental Features
As we’ve already said, the latest NextJS update brought several experimental features still in development. One of the most notable is the change to its app directory, a feature that completely changes how data is obtained and processed.
This change will bring significant performance improvements that will cause developers to change how they design their applications.
Until now, NextJS allowed us to create a file and then make a route based on it. After the new update, the directory can be included in the root of each project, improving the routing considerably.
Another experimental feature is the new Turbopack wrapper, a Rust-based system that promises to be up to 700 times faster than Webpack. Finally, NextJS 13 brings a font optimization that allows you to use custom fonts downloaded during the build.
Server Components
By default, all components inside the app directory will be React server components. Thanks to this, the server components will be adopted without additional programming, which brings a higher performance from the beginning of the project.
When loading a page, the NextJS runtime will be cached and remain the same even as the app grows.
Client Components
In this release, client components add client-side JavaScript when needed. In general, these components should be used when:
- You are using React client hooks
- You depend on certain browser APIs
- Want to add certain event listeners
Should you use client or server components?
In NextJS 13, client components should only be used if necessary. If not, it’s better to let NextJS use them as React server components since there will be less client-side JavaScript.
What about data collection?
Although in NextJS, you can get data from client components, and it recommends that you get it from the server. This way, you will achieve superior performance, and the user experience will be much better.
Obtaining data in server components brings many benefits, such as:
- Direct access to back-end data resources
- Get data and render the component in the same environment
- Perform multiple data recoveries as a single round trip
- Send Less JavaScript to the Client
Remember that getting data into client components is still possible, although it is recommended only to do so if absolutely necessary.
What else do you need to know about NextJS 13?
NextJS 13 brings new features that, although they will be very useful once they become stable, for now, they can cause many conflicts. If you’re not interested in testing its experimental features, you can safely upgrade from version 12 and take advantage of the stable changes.
If you want to experiment with its new features, you should know that you may have stability or performance problems in your project. After all, using these functions will serve as feedback to the developers and the problems they find.
Final thoughts
NextJS 13 brings several changes that make NextJS a much better development platform. Its new features promise to be very useful once they become stable, so it’s definitely worth keeping an eye on this update if you use NextJS in your projects. Meanwhile, NextJS 12 offers enough stability and performance improvements to make upgrading worthwhile. As always, it ‘s important to carefully weigh the risks and benefits of upgrading your NextJS version before making any changes. Good luck!