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>
);
}
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>
);
}
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.
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.
With new third-party scripting, they have achieved 65x faster loading.
Some example of these scripts from conference are below.
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)
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
So True, I am looking forward to use this in production
Good stuff. Thanks for sharing!
You're welcome
This is quite interesting.
Use C in your React!
React
use cUse C in your React! (Or if you prefer Rust)
Screen.Recording.2023-10-28.at.2.32.49.AM.mov
TODO
create-react-use-cpackage cuz this ecosystem is brokenServer Action, one of the best features yet. 🍐
I second you
Turbopack still in beta?