Digesting the Keynotes from Next.js Conf 2023: Nextjs 14

Hey there, yeah you've read it correctly Nextjs 14, barely a year after the release of Nextjs 13.

Oct 26, 10am PT. Nextjs held its annual conference and we had a little taste and insight of what's to come.

A variety of innovative and groundbreaking features were discussed, but these were the major Keynotes on Nextjs 14;
• Turbopack: is Nextjs turbo yet?
• Server actions (stable)
• Partial rendering 😊
• Nextjs Learn

Turbopack; is Nextjs turbo yet?

With performance being a major interest from the community, Nextjs are changing their approach to be more incremental.

5,000 integration tests for next dev are now passing with Turbopack, the underlying Rust engine.

90% of tests now passing for next dev both on pages and app router
• Up to 53.3% faster local server startup

• Up to 94.7% faster code updates with Fast Refresh

Turbopack will be stable in upcoming minor releases once 100% of tests are passing. You can view the progress of this test on is Nextjs turbo yet?

Server actions (stable)

In Next.js 14, in order to user experiences even with slow network connections, you could define a function that runs securely on the server, called directly from your React components.

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>
  );
}

Mutating data, re-rendering the page, or redirecting can happen in one network roundtrip. In app router, server actions are deeply integrated allowing features like caching, revalidation, redirecting and more.

Partial rendering (preview)

A preview of what's to come - a compiler optimization for dynamic content with a fast initial static response

Note: Partial Prerendering requires no new APIs to learn.

Pre rendering is built on React Suspense. The Suspense fallback is prerendered ahead of the dynamic components.

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

The dynamic components is streamed in as part of the same HTTP request as the static shell, so no need for extra network roundtrips.

I can't personally wait for this update 😊.

Nextjs learn (new)

Nextjs announcer the release of a new free courses covering several requested topic by the community. The course teaches:

• The Next.js App Router

• Optimizing Fonts and Images

• Creating Layouts and Pages

• Setting Up Your Postgres Database

• Fetching Data with Server Components

• Static and Dynamic Rendering

• Adding Search and Pagination

• Mutating Data, Handling Errors

• Improving Accessibility

• Adding Authentication

Only to mention a few, head to https://nextjs.org/learn to take the course. Keep learning!

Acknowledgments

Next.js is the result of the combined work of over 2,900 individual developers, industry partners like Google and Meta, and our core team at Vercel. Join the community on GitHub Discussions, Reddit, and Discord.

Conclusion

Personally, I feel sometimes new updates can be sometimes overwhelming especially if one hasn't fully grasped the previous ones.

Although , any development or ideas to better improve user experience and create a seamless interaction, sign me up baby 💆🏿‍♂️.

Thank your for you time and stay tuned for more updates and articles.

👋 I'm Hakeem Raji, frontend developer. Love to hear your feedbacks and questions.

Have a lovely day.

hak_raj codes