Next JS Conf: Next 14 and 3 Key Takeaways

Vercel just announced the release of NextJS 14. Let’s go over the 3 key takeaways from the Next JS Conference and what it all means for you. (And 2 bonus points I found very interesting)

First, the release of Next JS 14. Vercel says Next 14 is “our most focused release”. What does that mean? What was the focus on? Let’s go through what was announced.

No new APIs

As Guillermo Rauch, Next JS’s creator (and also the CEO of Vercel), was proud to announce in the keynote, Next JS 14 contains no new APIs. In short, the Next team has been focused on improving what they have already created rather than implementing anything new. What have they improved?

Turbo packager getting close: 90% of tests passing

First, the team has focused on performance. They have been working on the compiler of their Rust-based tool, Turbo. When run on the vercel.com website, this shows 53% faster local server startup and up to 94% faster live refreshes on code change.

However, Turbo is not yet stable. A website called “Are we Turbo Yet” allows you to track the unit test passing rate. And for the moment, there is a 91% pass rate.

As I used to say when I was developing video games, the hardest part is not the first 90% of work, it’s the second 90% of work that goes into finishing the final 10%.

Partial Pre Rendering

The second area of focus is simplicity. The team have worked on a new feature called “Partial Pre-Rendering”.How is this different from all the other rendering modes we’ve talked about over the years between SSG and SSR and ISG and RSCs …

A few things to point out here.

First, this is currently an experimental feature. You can activate it via the configuration file, but it is not yet stable.

Second, the goal is to simplify Next JS, and how rendering is configured by the developer.

Using the Suspense boundaries, the app determines which parts of the application are dynamic and which are static. It pre-renders the static parts of the page as HTML, and streams the updates to the dynamic parts.

The idea is to provide the best of both worlds between dynamic and static generation. This is reminiscent of Astro’s Islands of Interactivity.

Talking of interactivity, if this is useful to you feel free to let me know by interacting with the like button or the comments interface :)

Server Actions

Third, as part of the focus on simplicity, the team has also working on Server Actions which are now stable. What is the impact of this?

I’ve had people ask me what kind of API or backend server to couple their Next JS with. Next JS is a backend server, but triggering backend logic has always been a little complicated. But with Server Actions, it is a lot simpler.

The idea is that you can define a function on the server and simply trigger it on the client, for example, via a button’s callback or a form action, as you can see in this code:

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Functionally, this is a remote procedure call or RPC. In short, this provides the same type-safety and functionality as tRPC but with a better developer experience. Because it is a native feature of Next JS.

Additional announcements

Now that’s sounds like fun, but there are two points in the conference that caught my eye.

Svelte AI SDK & v0.dev

First, Jared Palmer, Vercel’s head of AI, gave a talk about how Next JS’s streaming features are particularly suited to generative AI. He announced Vercel’s new AI SDK that provides a unified interface with various LLMs. This is used in v0.dev, the website where you describe the interface you want and it generates it.

v0.dev is built on Next 14 and showcases the SDK and the UI streaming. As soon as I’ve taken a closer look I’ll tell you all about it.

Learn Next JS

Guillermo also announced a tutorial website to teach you all of Next JS’s features, including authentification and storage. I’ll explain how it can benefit you here as soon as I’ve gone through it.So I’ll see you in the next video.