NextJS 14: A closer look at the latest enhancements and announcements
Released on October 26, 2023, NextJS 14 marked a milestone with a host of noteworthy announcements that accompanied this eagerly awaited update. In this release, developers can anticipate a range of impactful features and improvements designed to enhance the overall user experience and streamline development processes. Let’s delve into some of the key highlights introduced with NextJS 14.
NextJS 14 - What’s new? NextJS 14 was announced at the NextJS conf and released at the same time. It brings a lot of changes but most of them are not new features.
Let’s take a quick look.
1. Turbopack
Most significant work was done to move the compiler to Turbopack. Tubopack is the underlying Rust engine used to run your NextJS application.
According to the numbers provided by Vercel, we get up to 53.3% faster local server startup and up to 94.7% faster code updates with fast refresh.
To use it locally run `next dev --turbo`
The work is not 100% complete so the flag is still needed to use it but Vercel says it will move to default when they can run 100% of their internal tests successfully.
You can follow the progress at https://areweturboyet.com/
2. Server Actions
Server Actions has been move to “stable” and you are now encourage to use them. The idea behind server action is that you can call a function instead of an API route. To use it, you can create the function in a file with "user server" or add it in the function itself - even from a Client Component.
Here is an example:
export default function Page() {
async function create(formData: FormData) {
'use server';
const id = await createItem(formData);
}
return (
<form action={create}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
}
Server Actions are deeply integrated into the entire App Router model so you can:
- Revalidate cached data with
revalidatePath()
orrevalidateTag()
- Redirect to a different route with
redirect()
- Send and read cookies through
cookies()
- Handle optimistic UI updates with
useOptimistic()
- Catch and display server errors with
useFormState()
- Display loading states on the client with
useFormStatus()
3. Partiel Prerendering
This feature is still in preview so you might find some bugs with it.
The idea behind it is to provide speed of static rendering but support fully dynamic response.
It is built on the React:
< Suspense />
Here is an example:
export default function Page() {
return (
<main>
<header>
<h1>My Store</h1>
<Suspense fallback={<CartSkeleton />}>
<ShoppingCart />
</Suspense>
</header>
<Banner />
<Suspense fallback={<ProductListSkeleton />}>
<Recommendations />
</Suspense>
<NewProducts />
</main>
);
}
With partial rendering enabled, this page generates a static shell based on the <Suspense /> boundaries. The fallback is pre-rendered then replace with dynamic components, like reading cookies to determine the cart.It is still under active development and will be coming soon in a minor release.
4. NextJS Learn
Vercel has now created a full set of courses to teach users how to learn NextJS. Fully available for free at https://nextjs.org/learn.
You can find everything from Router, Styling with Tailwind CSS, Optimizing Font and Images, Layout, Pages, Navigation, DB setup, Streaming, Error handling and more...
5. Other
There are other smaller changes worth mentioning:
- Some deprecations and addition to the Metadata API where some elements are moved from string to objects
- Minimal Node version is now 18.17
- Some imports have moved
Conclusion.
This was a large effort provided by around to 500 contributers so, even if the feature set is not very large, there is a lot of improvements that we don’t see.
After some limited testing, I can say that it is very stable and I like those Server Actions a lot and, most importantly, upgrade from later v13 to v14 has been without issues for me. Note that all my upgrades where from applications running on 13.4+ with App Router.
Thanks for reading.
Relatert innhold