Key Updates in Next.js 15 | M.Bakir-Jamali Portfolio

This continuation highlights the key updates and enhancements introduced in Next.js 15, aimed at improving development workflows, boosting performance, and addressing important changes. With features like automated upgrades using the new codemod CLI, significant Turbopack optimizations, and enhanced security for Server Actions, Next.js 15 offers a wide range of tools to streamline processes. Here’s a closer look at the most important features and updates.uced in Next.j

You can access the first part of the overview on Next.js 15 by following this LINK 🧑‍💻

Smooth Upgrades with Codemod CLI

Codemods (automated code transformations) are included with every major Next.js release to help streamline the upgrade process for breaking changes. The new enhanced codemod CLI further simplifies upgrades. To upgrade to the latest stable or prerelease versions, use the following command:

npx @next/codemod@canary upgrade rc

This tool updates your dependencies, shows available codemods, and guides you through applying them. The specified dist tag on the command line (e.g., @rc, @canary) determines the version for the upgrade.

Turbopack for Development

Turbopack for local development will reach stability with the general release of Next.js 15, remaining as an opt-in feature. It can be tested today with the command:

next dev — turbo

Through community testing and internal efforts, 54 GitHub issues have been resolved since the first Next.js 15 Release Candidate. Recent optimization efforts have focused on cold compilation performance, resulting in:

25–35% reduction in memory usage
30–50% faster compilation for large pages with thousands of modules

Further improvements are in progress, including persistent caching, memory usage reduction, and Turbopack for the next build command, with 96% of tests currently passing.

Async Request APIs

To prepare for future optimizations, APIs that rely on request-specific data, such as headers, cookies, params, and searchParams, are being transitioned to asynchronous functions. An example of the new syntax is:

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

This change affects APIs like cookies, headers, draftMode, and params in layout.js, page.js, and more. While these APIs can still be accessed synchronously with warnings, upgrading is recommended.

To assist with the migration, run the following codemod:

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

For further details, consult the upgrade guide.

Enhanced Security for Server Actions

Server Actions are server-side functions callable from the client. Even if these functions are not imported, they remain publicly accessible HTTP endpoints, which can lead to unintentional exposure. To address this, several security enhancements have been introduced:

Dead code elimination: Unused Server Actions won’t expose IDs to the client-side bundle.
Secure action IDs: Unpredictable, non-deterministic IDs are generated for each build, making it harder to guess action endpoints.

'use server';

export async function updateUserAction(formData) {}
export async function deleteUserAction(formData) {}

Static Route Indicator

During development, Next.js now displays a Static Route Indicator to highlight whether routes are static or dynamic, helping with performance optimization. This indicator provides visual cues on how pages are rendered.

Rendering strategies for all routes can also be viewed in the next build output.

New Component

The new <Form> component extends the standard HTML <form> element, offering prefetching, client-side navigation, and progressive enhancement. It's especially useful for forms that navigate to new pages, such as search forms.

Static Route Indicator

Rendering strategies for all routes can also be viewed in the next build output.

New Component

import Form from 'next/form';

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Features include:

Prefetching: Layout and loading UI are prefetched for faster navigation.
Client-side Navigation: Shared layouts and client-side state are preserved on form submission.
Progressive Enhancement: The form works even if JavaScript hasn’t fully loaded, using full-page navigation.

Support for next.config.ts

Next.js now supports TypeScript configuration files (next.config.ts), providing type safety and autocomplete with the NextConfig type.

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  // config options
};

export default nextConfig;

instrumentation.js (Stable)

The instrumentation.js file and its register() API have reached stability. This feature enables monitoring performance, tracking errors, and integrating with observability libraries such as OpenTelemetry.

Additionally, the onRequestError hook allows capturing context around server errors and reporting them to an observability provider.

export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}

export async function register() {
  // Initialize your observability provider SDK
}

Development and Build Improvements

Server Components HMR

To enhance development performance, Hot Module Replacement (HMR) for Server Components has been improved. Now, HMR can reuse fetch responses from previous renders, reducing API call overhead during development.

Faster Static Generation

Static generation has been optimized, reducing build times by reusing the initial render to generate both client-side navigation data and HTML. Additionally, static generation workers now share the fetch cache across pages, minimizing redundant requests.

Advanced Static Generation Control

Experimental options for more control over static generation are now available. These options include controlling retry counts, worker concurrency, and page processing thresholds. It’s recommended to use these only for specific advanced use cases, as they can increase resource usage and lead to potential out-of-memory errors.

const nextConfig = {
  experimental: {
    staticGenerationRetryCount: 1,
    staticGenerationMaxConcurrency: 8,
    staticGenerationMinPagesPerWorker: 25
  },
};

export default nextConfig;

Improvements for Self-hosting

When self-hosting applications, more control is now available over Cache-Control directives, especially for ISR pages. Two key improvements have been made:

The expireTime value can now be configured in next.config.
The default cache duration has been updated to one year.

In addition, image optimization has been streamlined. Manual installation of sharp is no longer required — Next.js automatically uses it when running in standalone mode.

ESLint 9 Support

With the end of life for ESLint 8 on October 5, 2024, Next.js adds support for ESLint 9 while maintaining backward compatibility. If your project hasn’t adopted the new ESLint config format, Next.js will automatically apply the ESLINT_USE_FLAT_CONFIG=false escape hatch to facilitate the transition. Deprecated options like --ext and --ignore-path are removed from next lint, anticipating further changes in ESLint 10.

Conclusion

Next.js 15 continues to enhance developer experience with new features like the <Form> component, TypeScript support for next.config.ts, and the stable release of instrumentation.js. Additionally, various improvements have been made to self-hosting, image optimization, and static page generation.

These updates aim to streamline development, enhance performance, and ensure future compatibility with evolving JavaScript and Node.js ecosystems. Developers are encouraged to review the breaking changes and take advantage of the migration tools provided to ensure a smooth transition to Next.js 15.