Nextjs 15 stable for production

Wednesday, October 23, 2024

tutorialsmaterial

Nextjs 15 stable for production

**Nextjs 15 **is officially stable version announcement and ready for production. This stable version update RC1 and RC2. Nextjs 15 several update focusing on stability and performance. so the next big new version of next.js 15. Learn that upgrading should be pretty easy thanks to code mode existing next js projects should ensure that all important change are made your to code automatically upgrade. Nextjs 15 support React 19

Nextjs 15 try

# automated upgrade codemod CLI
npx @next/codemod@canary upgrade latest
 
#  manually upgrade

npm install next@latest react@rc react-dom@rc

What new Nextjs 15 stable version:

Easy Update with next/codemod

Nextjs include codmod and automatically update your code

codmod CLI command:

npx @next/codemod@canary upgrade latest

codmod cli update yoyr depandencies(nmp package),

Async Requests: (Breaking Change) - Next-Level Performance!

This version change is the async request API next -level change .

Nexjs 15 major change in caching semantics enhanced server form handing improved build performance and security. server action. The serveraction has been greatly improved nextjs 15

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

Breaking change in this change and effect your project

  1. cookies
  2. params in layout.js page.js route.js
  3. searchParams in page.js
  4. header
  5. draftMode

automatically migration using codemod Cli

npx @next/codemod@canary next-async-request-api 

Caching Semantics

A bit more important change brought upon us Next.js 15 is that with that newest major version that caching behavior of Next.js project becomes a bit less aggressive because nextjs when using the app router and pretty much all these changes here affect the app router to be honest , but when using the app router Nextjs used to be pretty aggressive regarding how it caches stuff. So now with Next.js 15 when using the fetch function you are going to send more request to whenever API you are reaching out to.

let data = await fetch('https://api.vercel.app/blog', { cache: 'no-store' })

React 19

Nextjs 15 stable version support latest version React 19. App router uses React 19 RC. Nextjs project used page Router this allows you to upgrade to React 19 when ready.

Turbopack Dev

Nextjs 15 used Turbopack for Nextjs project speed increase. next dev --turbo is now stable and ready to speed up nextjs project development.

  • up to 70% more than faster local server startup
  • up 96.3 % faster code update with fash referesh
  • up to 45.8% faster intitial compile app router without caches

other update list

  • Static indicator
  • Enhance Form
  • Self hosting improvement
  • Server action security
  • ESLint 19 support
  • Development and build performance
  • Building external Package(stable)
  • next-config file support Typescript next-config.ts