The evolution of Next.js continues with the much-anticipated release of Next.js Version 14, and it's nothing short of turbocharged! Let's dive into the exciting new features and improvements that Next.js has brought to the table.
Note: You can try it out today with the following command: npx create-next-app@latest.
Turbocharged Compiler
Since Next.js 13, the development team has been on a mission to enhance local development performance, particularly in the Pages and App Router. Their initial approach involved rewriting next dev and other components, but they've now shifted to a more incremental strategy.
The heart of this strategy is the Rust-based compiler, Turbopack, which is bringing about significant stability and performance improvements. A remarkable 5,000 integration tests for next dev have passed with flying colors when powered by Turbopack. These tests include seven years' worth of bug fixes and reproductions.
Here are some of the key takeaways when using Next.js 14:
- Up to 53.3% Faster Local Server Startup: Experience a remarkable boost in your local server's startup speed, making your development workflow more efficient.
- Up to 94.7% Faster Code Updates with Fast Refresh: Code updates are now lightning-fast, thanks to Fast Refresh, providing you with an agile development experience.
With 90% of tests for next dev passing, you can expect consistently improved performance. Once they hit 100% of test coverage, Turbopack will become a stable part of the Next.js ecosystem. And fear not, custom configurations and ecosystem plugins can still be used, making Next.js flexible for your specific needs.
For a detailed look at the percentage of passing tests, you can check out areweturboyet.com.
Forms and Mutations
In Next.js 9, API Routes were introduced, making it easier to build backend endpoints alongside your frontend code. You create a new file in the api/ directory to define your API endpoint, like pages/api/submit.ts. Then, on the client-side, you can use React to interact with this API Route.
With Next.js 14, the developer experience for authoring data mutations is being simplified. The goal is to improve the user experience, especially when users have a slow network connection or are submitting forms from lower-powered devices.
Server Actions (Stable)
Imagine not needing to manually create an API Route. With Server Actions, you can define a function that runs securely on the server, called directly from your React components. This feature is built on the React canary channel, and it's stable for frameworks to adopt new features. As of version 14, Next.js has upgraded to the latest React canary, including stable Server Actions.
Here's a simplified example of how you can use Server Actions:
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>
);
}
This approach should feel familiar for developers with experience in server-centric frameworks. It's built on web fundamentals like forms and the FormData Web API. Server Actions are not limited to form submissions; you can also call them directly as functions, ensuring full end-to-end type-safety when using TypeScript.
Caching, Revalidating, Redirecting, and More
Server Actions are deeply integrated into the App Router model, enabling you to perform various tasks such as revalidating cached data, redirecting to different routes, handling cookies, and more. This level of integration ensures a smooth and reliable user experience.
Partial Prerendering (Preview)
One of the most exciting features Next.js is working on is Partial Prerendering. This optimization aims to deliver dynamic content with a fast initial static response, combining the best of server-side rendering (SSR), static-site generation (SSG), and incremental static revalidation (ISR).
Partial Prerendering is built on React Suspense, and it simplifies the existing model without introducing new APIs for developers to learn. Here's how it works in a nutshell:
- Define your Suspense boundaries.
- A static shell is generated based on these boundaries.
- Fallbacks from React Suspense are prerendered.
- Dynamic components are inserted seamlessly, often without extra network roundtrips.
This means faster loading, especially for users with slow network connections or on lower-powered devices. No extra effort is required if you're already using loading.js today.
Metadata Improvements
In Next.js 14, the handling of metadata has been refined. Essential metadata about the viewport, color scheme, and theme is sent to the browser before your page content is streamed from the server. This ensures a smoother user experience and prevents issues like theme color flickering or layout shifts due to viewport changes.
Some metadata options are deprecated, but new ones, such as viewport and generateViewport, have been introduced. These new options provide a more flexible and efficient approach to managing metadata.
Next.js Learn Course
To help developers get the most out of Next.js, a brand new, free course has been launched on Next.js Learn. This course covers a wide range of topics, from setting up your database to optimizing fonts and images, handling errors, and improving accessibility. It's a valuable resource for both beginners and experienced developers.
You can access the course at nextjs.org/learn.
Other Changes
Next.js Version 14 also comes with various other changes, including updates to the minimum Node.js version, improvements in memory management, and more.
In conclusion, Next.js 14 is a significant leap forward, offering a range of improvements that make web development faster, more efficient, and user-friendly. Whether you're building a small application or a large-scale project, Next.js continues to prove its worth as a top-tier web framework. Don't miss out on these exciting updates - give Next.js 14 a try and experience the turbocharged development environment for yourself!