Next.js v14.0 & React v18.0 - New Features Overview

Next.js 14 Core Features

• Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh
• Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms
• Partial Prerendering (Preview): Fast initial static response + streaming dynamic content
• Next.js Learn (New): Free course teaching the App Router, authentication, databases, and more.

1. Automatic Batching

Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically:

// Before: only React events were batched.
setTimeout(() => {
  setCount((c) => c + 1)
  setFlag((f) => !f)
  // React will render twice, once for each state update (no batching)
}, 1000)

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount((c) => c + 1)
  setFlag((f) => !f)
  // React will only re-render once at the end (that's batching!)
}, 1000)

Transitions

A transition is a new concept in React to distinguish between urgent and non-urgent updates.

• Urgent updates reflect direct interaction, like typing, clicking, pressing, and so on.
• Transition updates transition the UI from one view to another.

import { startTransition } from 'react'

// Urgent: Show what was typed
setInputValue(input)

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input)
})

https://react.dev/blog/2022/03/29/react-v18

Upgrading: Version 14

The minimum Node.js version has been bumped from 16.14 to 18.17, since 16.x has reached end-of-life. To update to Next.js version 14, run the following command using your preferred package manager:

NPM

$> npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Yarm

$> yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

PNPM

$> pnpm up next react react-dom eslint-config-next --latest

https://nextjs.org/docs/app/building-your-application/upgrading/version-14