DEV Community

Cover image for Highlight on the new features of Next JS 14 config 2023
Muhammad Azfar Aslam
Muhammad Azfar Aslam

Posted on • Updated on

Highlight on the new features of Next JS 14 config 2023

Hi again and welcome to the new Next JS 14. Yes, you've read it correctly, Within 12 months, Next JS 14 is out. I've experienced attending config again and what a startling presentation by Guillermo Rauch, CEO of Vercel and creator of Next JS. No new API, we are following the same Next JS 13 APIs but with some excellent improvements. Some of the main topics are mentioned below.

  • Turbopack

  • Server Actions (Stable)

  • Partial Prerendering (Preview)

  • Next.js Learn (New)

Turbopack

Guillermo Rauch asked many people should work on Performance or Feature and Performance wins. Now they think should we change our source language or what but they continue to same. Next JS 14 is still using Rust Engine.

5,000 integration tests for the next dev are now passing with Turbopack, our underlying Rust engine. These tests include 7 years of bug fixes and reproductions.

While testing on vercel.com, a large Next.js application, we've seen:

Up to 53.3% faster local server startup
Up to 94.7% faster code updates with Fast Refresh

Server Actions (Stable)

Guillermo said, we were doing great in Next JS 13 but there was one piece missing and that was Server Actions. Now with Next JS 14, Server Actions are stable and we can call them from anywhere. No external API is required, you can fetch data directly from sql.

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Mutating data, re-rendering the page, or redirecting can happen in one network roundtrip, ensuring the correct data is displayed on the client, even if the upstream provider is slow. Further, you can compose and reuse different actions, including many different actions in the same route.

Partial Prerendering (Preview)

As a front-end developer, my favorite feature is this. Partial Prerendering. Sam Selikoff Founder, Build UI addressed at the conference that he was really impressed with React useSWR and he wanted to do something amazing inside Next JS and he did well.

He said, according to him. React JS works like LEGOS and small LEGOS work together to form anything. Similarly, small components can work together like a charm and can produce some amazing work. Nike is also using Next JS.

Partial Prerendering is defined by your Suspense boundaries. Here's how it works. Consider the following ecommerce page:

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Next.js Learn (New)

Mr. Guillermo also introduced a brand new, free course on Next.js Learn. This course teaches:

  • The Next.js App Router
  • Styling and Tailwind CSS
  • Optimizing Fonts and Images
  • Creating Layouts and Pages
  • Navigating Between Pages
  • Setting Up Your Postgres Database
  • Fetching Data with Server Components
  • Static and Dynamic Rendering
  • Streaming
  • Partial Prerendering (Optional)
  • Adding Search and Pagination
  • Mutating Data
  • Handling Errors
  • Improving Accessibility
  • Adding Authentication
  • Adding Metadata

Houssein Djirdeh - Senior Software Engineer, at Google who is working under Aurora to develop third parties for Next JS announced some enhancements as well.

Image description

Most developers like myself face a similar problem when they import 3rd parties and that is a performance issue in Google page speed. LCP increases that cost performance. He is trying to overcome this issue. Had a huge amount of success already but still working on it.

Image description

With new third-party scripting, they have achieved 65x faster loading.

Image description

Some example of these scripts from conference are below.

Image description

Image description

All images are from the Next JS 14 conference and some text is taken from the official blog.

I hope this will be helpful, love to connect with you on LinkedIn


Few more articles

Top comments (8)

Collapse
 
dsaga profile image
Dusan Petkovic

Server actions seam especially interesting, wondering what kind of magic happens under the hood, things probably get swapped out with some kind of request calls...

but it potentially makes fetching data a lot easier

Collapse
 
muhammadazfaraslam profile image
Muhammad Azfar Aslam

So True, I am looking forward to use this in production

Collapse
 
maxprilutskiy profile image
Max Prilutskiy

Good stuff. Thanks for sharing!

Collapse
 
muhammadazfaraslam profile image
Muhammad Azfar Aslam

You're welcome

Collapse
 
artxe2 profile image
Yeom suyun

This is quite interesting.

GitHub logo elnardu / react-use-c

Use C in your React!

React use c

Like this? Play cursedCTF 2024 teaser this Halloween! discord.gg/RGzgGvTnYA

Use C in your React! (Or if you prefer Rust)

image
Screen.Recording.2023-10-28.at.2.32.49.AM.mov

TODO

  • Add more folders and files with code that does nothing to look more professional
  • Create create-react-use-c package cuz this ecosystem is broken
  • Add typescript support
  • Make somebody else figure out publishing this to npm (I am still not over it)
  • Remove typescript support
  • Tell windows ppl to just use WSL (see #2)
  • esbuild is not cursed enough, gotta switch to something else



Collapse
 
rakshit47 profile image
Rakshit Raj

Server Action, one of the best features yet. ๐Ÿ

Collapse
 
muhammadazfaraslam profile image
Muhammad Azfar Aslam

I second you

Collapse
 
shibun profile image
Shibu N

Turbopack still in beta?