On 26 October 2021, Next js announced version 12. It was more impressive than Apple’s new MacBook announcements which are pretty mind-blowing considering it’s just a free JavaScript framework.

They are setting the bar really high for what a full-stack JavaScript framework is expected to do like it now ships with a rust compiler instead of JavaScript to give you 5x faster builds.

The good thing is that you don’t need to know rust. it just makes next faster under the hood by replacing babel which is important because big complex apps tend to have slow build times. let’s take a look at all the new features next 12 and more importantly why you would want to use them.

Middleware

The first feature I want to talk about is middleware. Middleware is not a new concept framework like express js uses middleware to intercept an HTTP request and process it in some way before it goes to your actual route handler.

With something like next js though things are a little more complicated. On one hand, you want your website to be really fast and the best way to make that happen is to cache pre-built HTML pages on a CDN.

But when you do that you lose the ability to make your pages dynamic.

So on the other end of the spectrum, you have server side rendering that uses a node server to fetch data from a database or API when an incoming request comes in but that is slow and inefficient in a perfect world though developers would have both speed and dynamic content at the same time.

And next is really leading the way to make that happen Vercel The company behind next has a product called edge functions. These are serverless functions like AWS lambda or Google cloud functions except they are deployed to the edge like a CDN so your end users get extremely fast execution with no cold starts. Now here’s where middleware comes in.

In your project create a file called _middleware in the pages directory from inside it you can export a function called middleware this function will give you access to the incoming request and allow you to modify it and it will run before rendering takes place for every page in the pages directory.

You can also scope the middleware to subdirectories if you only want it to run on a subset of pages. What’s awesome about middleware is that it makes your code way for efficient.

Support For React Concurrent Mode

Next 12 provides support for React concurrent mode like suspense. If you are not familiar with suspense it’s basically a component that allows you to wait for asynchronous data before rendering its children as of today it’s still experimental in React. But it’s still used in production on some websites like Facebook.

However, if you try to use it next it results in errors because it does not play well on the server. In the next 12, you can opt into experimental concurrent features. To get these features working with server-side rendering it also supports react lazy to dynamically import ES modules which can reduce the size of your client side JavaScript bundle.

React Server Component

Now this feature might be the one that I am most excited about React server components, server components allow you to natively render HTML from React components on the server.

What’s crazy about it though is that it uses HTTP streaming to progressively render a web page on a server that means if you need data for one component and then another component after that you don’t have to wait for one after the other it will render the first one then the next one after that which really opens up a whole new world of possibilities when it comes to designing full stack web applications.

For using a server component in your app you can change the page or file name to .server.js to tell the framework that it’s a server component when this component is rendered it requires zero client-side JavaScript that means fewer KBs for the end-user to download.

In addition, you can data directly inside the component without having to use functions like get static props or get server-side props. It’s a really ergonomic way to build an application. You use react patterns from start to finish or server to client. Now you will want some interactive JavaScript for the client so you can also import regular client components as well and they will be rendered universally both on the server and the client.

URL Import

There’s one more cool feature you will want to know about you can now import modules using URLs instead of NPM this works for JavaScript modules you would import from a CDN but you can also use remote URLs in your CSS or to import images directly into your JavaScript code.

Conclusion

Overall Next v12 is a total beast. You should definitely try that out.

Bit: Build Better UI Component Libraries

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

• Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
• Easily share, and reuse components as a team.
• Quickly update components across projects.
• Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→