Next.js 14: No New APIs & Breaking Changes

Next.js Conf 2023, held at SFJazz in San Francisco, CA, was a phenomenal blend of live in-person talks and networking with amazing industry experts. I am appreciative to have been given the chance to attend this year. In this article, I’ll give you the TLDR; on the conference and announcements.

Highlights

• Turbopack is getting faster!
• Server Actions are now stable.
• Partial Prerendering is in preview.
• A free course, Next.js Learn, was released.

Turbocharged Next.js Compiler

The Next.js team has tirelessly worked on enhancing local development performance since Next.js 13. The focus shifted to a more incremental approach, with Turbopack, their Rust-based engine, being at the core of these advancements. The real-world impact is up to 53.3% faster local server startup and up to 94.7% faster code updates with Fast Refresh. This initiative is nearing its stable release, promising a more reliable, swift development experience.

Stabilization of Server Actions

With Next.js 14, Server Actions have become stable. Instead of manually creating API routes for backend tasks, developers can define server-side functions directly within React components, allowing a seamless interaction between client and server, even incorporating error handling, caching, revalidating, and redirecting within the App Router model. The underlying goal is to streamline the developer's workflow while enhancing the user's interaction with the application. For those using TypeScript, it also ensures better type-safety between client and server. This stable upgrade highlights Next.js's ongoing efforts to enhance the synergy between client and server, promising a more streamlined and robust web development experience.

// app/page.tsx

export default function Page() {

  async function create(formData: FormData) {

    'use server';

    await db.form.insertOne({ formData });

  }

return (

    <form action={create}>

      <input type="text" name="name" />

      <button type="submit">Submit</button>

    </form>

  );

}

Partial Prerendering (Preview)

Partial Prerendering aims to amalgamate the speed of static rendering with the flexibility of dynamic, personalized responses. This compiler optimization leans on React Suspense to deliver a fast initial static response while dynamically replacing components based on user interactions or other triggers. It simplifies the rendering model, requiring no new APIs to learn, and is under active development.

// app/page.tsx

export default function Page() {

  return (

    <main>

      <header>

        <h1>My Store</h1>

        <Suspense fallback={<CartSkeleton />}> // skeleton loads while data is being loaded from your database

          <ShoppingCart /> // Replaces the skeleton when data loading is finished

        </Suspense>

      </header>

      <Banner />

      <Suspense fallback={<ProductListSkeleton />}>

        <Recommendations />

      </Suspense>

      <NewProducts />

    </main>

  );

}

Metadata improvements

Next.js 14 addresses the importance of sending crucial metadata about the viewport, color scheme, and theme to the browser before streaming the page content. This effort helps in preventing flickers or layout shifts, enhancing the user experience. Some deprecated metadata options have been replaced with new ones to further this initiative.

Education and community

A brand-new free course on Next.js has been released, covering a wide array of topics from styling, optimizing fonts, and images to setting up databases and handling errors. This addition is a testimony to the growing community and educational resources surrounding Next.js.

Breaking changes

Several breaking changes and deprecations were announced to pave the way for improved features and streamlined development experience.

• The minimum Node.js version requirement has been updated to 18.17.
• WASM Target removed.
• @next/font replaced with next/font.
• ImageResponse import changed from next/server to next/og.
• next export deprecated; instead, use output: 'export'.

The talks

This is not an exhaustive list of every talk. I’ve picked the ones that I had the opportunity to attend/watch.

Keynote: “No New APIs” 🎉 - Guillermo Rauch

In the keynote for Next.js Conf 2023, Guillermo Rauch discussed the growth and future of Next.js. The talk highlighted the release of Next.js 14, which focuses on improved performance and simplification, rather than introducing new APIs. Guillermo discussed how Next.js 14 is building on foundational technologies like React Server Components and introduced a new feature in preview, called "Partial Prerendering," aimed to provide both fast initial and dynamic visuals without compromising on the developer experience.

How Next.js is Delivering React’s Vision for the Future - Sam Selikoff

Sam discussed how Next.js is fulfilling React's vision for the future, focusing on the integration of server components and server actions into Next.js. He explained that server components and server actions offer a "first-class way" to fetch and handle data, which complements React’s strong suit: composability. 🍻

There was a bit of controversy when an out of context screenshot emerged on Twitter. But if you were there in the audience or online watching, the point Sam was trying to get across was clear: Server Actions are awesome! This talk really made it click for me.

Also, I fixed the image: 😅

Executing on Inspiration with the Vercel Stack - Michelle Bakels

Michelle shared her journey of organizing React Miami, a developers' conference, and how Vercel and Next.js made the process efficient and manageable. With no prior experience in organizing such events, Michelle discussed the challenges she faced and how Vercel’s suite of features, from free Next.js templates to AI-powered CMS solutions, enabled her to focus on what mattered most: building a community and bringing a world-class tech conference to South Florida.

Building Generative UI with Next.js - Jared Palmer

In his talk, Jared Palmer, VP of AI at Vercel, gave us a backstage pass to v0, a product that leverages AI to generate UI code from natural language prompts. v0 uses Vercel's AI SDK and integrates seamlessly with Next.js, providing a streamlined architecture for AI-native products. Palmer also discussed the shift toward generative user interfaces and how Next.js 14 sets the foundation for this new era.

The Big Headless CMS Lie - James Mikrut

James, the co-founder of Payload, a headless CMS with MongoDB support, shared his insights on the drawbacks and limitations of using a headless CMS in the context of web development. He challenged the promises often made about headless CMS, such as separation of concerns and ease of content migration, revealing that these claims often don't align with the reality faced by developers and clients. James is considering integrating Payload directly with Next.js to overcome these limitations and offer a better developer experience, including out-of-the-box features and simpler deployments. Should Payload move to Next.js?

Performance in React and Next.js - Lydia Hallie

Lydia's talk focused on enhancing web performance through the latest features in React 18 and how Next.js leverages these advancements. She discussed the challenges posed by long tasks on the main thread and how they can affect user experience. Lydia discussed React 18's concurrent features, which allow for more responsive, non-blocking user interactions and smoother state updates. She highlighted how Next.js has further optimized these features to provide developers with out-of-the-box solutions for better-performing applications.

Live from Next.js Conf: Twitch Takeover - Theo, Madison Kanna, ThePrimegen

Theo, Madison, and Prime reacted to the Next.js Conf live during the conference. If you watched the conference live from Theo’s Twitch channel, you got the best experience with play-by-play commentary throughout the event.

Witty banter.. ✅

Light-hearted observations.. ✅

HTMX promotion.. ✅

Unlocking Composable Content with the App Router - Kapehe & Grant Sander

Kap and Grant discussed the benefits and challenges of adopting the App Router in Next.js, focusing on its impact on Formidable's business. They talked about how the App Router improves the quality of life by allowing Server Components and co-located data fetching, as well as enabling the embedding of Sanity Studio directly into Next.js apps. The talk also covered migration hiccups, primarily with library compatibility, and delved into caching and revalidation between Sanity and Next.js using the revalidateTag function.

Scaling an Open Source Learning Platform with Vercel - Chris Bautista

Chris, aka Trash, discussed how the TypeHero team has utilized Next.js and the Vercel ecosystem to rapidly scale their open-source learning platform. He emphasizes the framework's strong suits like React Server Components for efficient data rendering and file-based routing for nested routes. He also shared real-world challenges and solutions, including using Turborepo to drastically cut build times and leveraging Vercel's collaborative features for UI/design feedback.

Make Your Next.js App Realtime and Collaborative - Sylwia Vargas

Sylwia discussed how to make a Next.js app real-time and collaborative by creating a polling application. She introduced PartyKit, a tool that simplifies the process of implementing WebSockets for real-time data without running a server. By coupling PartyKit with Next.js, she demonstrated how to create a fully functional, real-time poll that users can interact with, showcasing the code and deployment process.

RSC and SSR: How it Fits - Tejas Kumar

Tejas delved into the intricacies of React Server Components (RSC) and how they integrate with server-side rendering (SSR), particularly in the context of Next.js. Using a dog-breed website as an example, he dissected the concepts of React elements and explained how RSC and SSR work cohesively. Tejas also demonstrated the mechanics of soft navigation in Next.js, highlighting that Server Components output JSX objects, not HTML strings, thereby offering a more fluid and progressively enhanced user experience.

The Things Vercel Won’t Show You - Theo

Theo explored unconventional and "cursed" patterns in Next.js that are typically not recommended by Vercel. The talk covered a range of tactics from marginally acceptable to highly irregular, such as pagination via Server Actions, using globalThis as an SSR helper, and even employing generator functions to achieve server-to-client component updates. These strategies, while not conventional, serve to push the boundaries of what's possible with Next.js.

Automate All of Your Customer Emails with AI in Next.js - Joel Hooks

Joel presented a comprehensive guide on automating customer emails using AI within a Next.js environment. The talk emphasized the need for a flexible, code-level owned, event-driven email workflow and introduced inngest as the tool for managing this automation. The core of the talk was a demonstration of how Hooks leveraged inngest functions to trigger emails upon specific user actions, with the email content itself being generated and refined through multiple rounds with GPT-based AI, achieving high-quality, contextually appropriate customer emails.

See you next year!

The conference was not just a showcase of the latest features but an exemplification of the community’s robustness and the continuous endeavor to elevate the Next.js ecosystem to new heights.

I’m looking forward to what the Next.js team has for us next time.

This article was inspired by the comprehensive write-up by the Vercel team. For an in-depth understanding and exploration of the features discussed, you can visit the Vercel Next.js 14 blog article.

Who am I?

My name is Jesse Hall. I’m a Senior Developer Advocate at MongoDB. We’ve partnered with Vercel to bring you our MongoDB Atlas Vercel Marketplace integration. With our integration, you can spin up a new MongoDB Atlas database in your Vercel project in no time!

For a quick walkthrough, check out this video: