Next.js conference 2024 recap by Ncoded Solutions: What’s new in Next.js 15? #14

Last week, our team at Ncoded Solutions tuned into the Next.js Conference 2024. Expectations were high for this conference, especially with the significant shifts in recent years like the App Router and React Server Components. There's been a lot of chatter online about this year’s Next.js conference, with some wondering if the updates were a bit light. But as we watched the sessions, it was clear that the focus was on strengthening stability, performance and scalability.

The big news? Next.js 15 is finally here and stable! It introduces some solid features that strengthen the framework with improved data handling, caching control and Turbopack stability. Let’s have a quick recap of this year’s conference and the best features of the new Next.js 15 version.

Highlights from Next.js Conference 2024

React Server Components

A standout session from Norwegian developer Aurora Scharff (Inmeta) showcased best practices for React Server Components. Through a live demo of her interactive task manager app, built with Next.js 15, Tailwind CSS, and Prisma, she demonstrated how server-side rendering improves app performance by reducing JavaScript bundle sizes, enhancing interactivity, and enabling real-time streaming.

Aurora also introduced Partial Prerendering — a technique that allows developers to prerender specific sections of a page, balancing performance with functionality by reducing server load.

Optimizing LCP with Partial Prerendering

Wyatt Johnson’s talk took Partial prerendering (PPR) further, focusing on its impact on Core Web Vitals, especially Largest Contentful Paint (LCP). Using the eco-friendly “Eco Store” app as an example, Wyatt explained how PPR merges static and dynamic rendering. In static rendering, the initial page loads quickly but lacks real-time data, while dynamic rendering delivers the latest content but can leave users waiting as the server processes each request.

With PPR, Next.js builds a static shell of the page ahead of time, loading essentials like CSS, JavaScript and fonts directly from the edge for a near-instant initial view. At the same time, a request is sent to the server for live data, combining the speed of static elements with the interactivity of real-time updates.

Key Features of Next.js 15

Next.js 15 introduced some interesting features (check out the Vercel's list), and our team at Ncoded Solutions has already picked a few top favourites:

Async request APIs for better data handling

One of the most impactful updates in Next.js 15 is the move to async request APIs. This means that server-side rendering doesn’t have to wait for all data before rendering, enabling faster load times and a more responsive user experience. This change affects the following APIs:

• cookies
• headers
• draftMode
• params (in layout.js, page.js, route.js, default.js, generateMetadata, generateViewport)
• searchParams (in page.js)

Although synchronous access is still available, the async approach will be the new standard.

Improved caching semantics

Next.js used to be pretty aggressive regarding how it caches stuff and it could lead to some strange behaviours, sometimes causing outdated content. Now, Next.js 15 has changed its caching approach, moving from automatic caching to an opt-in model.

Fetch requests, GET route handlers and client navigations now prioritise fresh data over cached content, ensuring pages automatically refresh when revisited. This change gives developers more control over when data is cached, making it easier to manage real-time data needs without risking outdated information, providing a smoother, more dynamic user experience.

Full support for React 19

React 19 compatibility is now built into Next.js 15, bringing support and new experimental hooks like useActionState, useFormStatus and useOptimistic. These hooks simplify state management for actions, improve real-time form tracking, and allow for optimistic updates, which are perfect for creating responsive UIs that update instantly while waiting for server data.

Next.js 15 also introduces support for the new experimental React Compiler from Meta. Designed to deeply understand JavaScript semantics and React rules, this compiler optimizes code by reducing the need for manual memoization with useMemo and useCallback. By adding automatic optimizations, the React Compiler makes code easier to maintain and less error-prone.

More detailed hydration errors

Debugging hydration errors just became less painful! 🎉 Next.js 15 now includes more detailed hydration error messages, showing the error messages that actually make sense and exact source code that caused the issue. This means less time spent hunting for bugs and diagnosing errors, and more time building cool stuff. We’re very happy about this change! 😄

For example, this was a hydration error in Next.js 14:

In Next.js 15 it now looks like this:

Stable Turbopack

Turbopack is now officially stable, providing substantial speed improvements for development. By running next dev --turbo, developers can experience faster build times, hot refreshes, and server startup speeds. These improvements are particularly beneficial for larger applications, making the development process much smoother and more efficient.

• Up to 76.7% faster local server setup
• Up to 96.3% faster code updates with fast refresh
• Up to 45.8% faster initial route compile without caching

This feature is really awesome and let’s hope it becomes a default in some near future 🤞 You can learn more about this cool tool here.

The new Form component

The new <Form> component in Next.js 15 is focused on forms that primarily have a function to navigate to another page – like search form. It enables:

• Prefetching – layout and loading UI are prefetched when the form is in view, so navigation is faster
• client-side navigation – shared layouts and client-side state are preserved on submission
• progressive enhancement – even if JavaScript hasn’t loaded yet or is disabled, the form still works via full-page navigation.

For example:

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

For forms that are used for submitting some data, we still need to use a regular form element.

TypeScript Support for next.config.ts TypeScript fans will appreciate the new support for next.config.ts. With TypeScript in the configuration file, developers now benefit from type-safety and autocomplete, making code less error-prone and easier to maintain. Example:

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

After exploring all these updates, you may be considering Next.js for your next project. Check out our thoughts on whether Next.js is the right fit for you in our blog post.

How to upgrade to Next.js 15?

Next.js 15 introduces the @next/codemod CLI that makes upgrading your existing Next.js project pretty easy. Here’s the command:

npx @next/codemod@canary upgrade latest

This tool helps you upgrade your codebase to the latest stable or prerelease versions. The CLI will update your dependencies, show available codemods, and guide you through applying them.

Wrapping up

As you could see, the Next.js Conference 2024 delivered impressive updates focused on making development faster, smarter, and more efficient. While it didn’t have the flashiest announcements, Next.js 15 comes packed with solid improvements in stability, performance, and scalability. With async APIs, Turbopack, React 19 compatibility, and detailed hydration error messages, it’s clear these upgrades are all about making life easier for developers.

At Ncoded Solutions, we’re definitely ready to test these features out. Which Next.js 15 feature excites you the most? Let us know in the comments or reach out to us ✍️