To make Next.js more developer-friendly, Vercel released Next.js 14 on 26 October 2023. What exciting new features have been added in Next.js 14 Let’s take a look at them one by one.

There’s Turbopack in Next.js 14 that speeds up local development. 53% faster local server startup and ~ 95% faster code updates were done by this Turbopack.

And even though, Turbopack is still being checked for passing 100% tests. When it passes 100% testing, according to Vercel, it gets stable in the releases. Contrarily, webpack will be supported for custom configurations and ecosystem plugins.

Further, you don’t have to manually create an API route for server-side code. You just have to define a function in the React component and use server actions. In one network roundtrip, mutating data, re-rendering the page, redirecting, and many other actions can be composed and reused. All while displaying data correctly on the client.

There’s some improvement in metadata as well. Previously, the server was used to stream page content and metadata about image resolution, size, and color depth has to be sent to the browser. But now both blocking and non-blocking metadata are decoupled. This means before rendering the page, you can send metadata. This ultimately improves user experience. You can use new options like viewport and generateViewport in Next.js 14.

And then for the developers who want to create web apps with dynamic content, there’s good news. Nextjs.14 has partial prerendering for dynamic content. It has both SSR and SSG that not only simplifies the rendering process but also diminishes the requirement for runtimes and configurations. You don’t even have to learn APIs for partial prerendering.

There are also plenty of courses that both experienced and beginner developers will find helpful. These courses talk about handling errors, improving accessibility, adding metadata, partial prerendering, etc. Just type in https://nextjs.org/learn to access the material. What’s best? All the courses are free!

Changes Made in Next.js 14:

1. If you are using older versions of node.js, update now. The Next.js app will work on Node.js versions 18.17 and above.

2. The WASM (web assembly) target has been removed. You have to look for another low assembly-like language.

3. You have to use next/font instead of @next/font (Codemod).

4. Images will be taken from next/og instead of next/server.

5. If you want to export the Next.js app, use output: 'export'.

6. onLoad instead of onLoadingComplete will be used for ImageResponse.

7. The function size of the create-app application is reduced.

8. For better performance, stability, and enhanced memory management, edge runtime will be used.

9. In the documentation, you will have more detailed and comprehensive log messages related to caching of data.