DEV Community 👩‍💻👨‍💻

Cover image for Next.js 13 is here
Devesh Anand Srivastava
Devesh Anand Srivastava

Posted on • Originally published at itmtb.com

Next.js 13 is here

Next.js 13 was announced recently at Next conf with plethora of new (and evolved) features that will make the process of writing and maintaining frontend code for software companies (and devs) like ours (itmtb.com) easier by improving quality, efficiency and readability of code.

Some of those features:

Server-side components by default:

Remember using getStaticProps, getStaticPaths and getServerSideProps? Well, they'll be obsolete in Next 13. Now is this a good step? In most cases, yes. Take the simple code below for example:

Server side prop in Next <=12 vs Next 13


Server side prop in Next <=12 vs Next 13

Apart from making the code more readable, server-side components bring in other advantages, like reducing client-side JavaScript bundle.

In large production apps with a lot of dependencies, it becomes a painful challenge for developers to reduce the bundle size, that too without compromising on functionalities. With server-side components, a major portion of dependencies never reach client-side, reducing the bundle size drastically.

Client-side components still have their purpose though, and any component can be made client side by simply adding 'use client' as the very first line. Whenever you need to re-render, or use useEffect you can easily make the component client-side.

Client-side component in Next 13


Client-side component in Next 13

An awesome layout system:

Next.js 13 introduces a new layout system at route level.

For example, we can now have custom layout for all pages in /blog route. Just put the layout in layput.{js/jsx/ts/tsx} under blog folder in pages (or app in Next.13) directory.

You can even have custom error component, or loading component based on routes. This definitely makes the developer experience way better and easier. Layouts even preserve state and don't re-render.

A deeper explanation of layout in Next 13:

Turbopack:

Let's be honest, webpack has been an essential part of the web, but with time it has shown it's drawbacks. It has it's fair share of non-fixable issues and it has hit the cap for performance for a bundler written in JavaScript.

Turbopack, a bundler written in Rust claims to solve the issue. As per Vercel's claims, it does:

  • 700x faster updates than Webpack
  • 10x faster updates than Vite
  • 4x faster cold starts than Webpack

The benchmarks are a topic of debate themselves, like the ones claiming Turbopack being 10x faster than Vite:

Nonetheless, it is faster than Vite (way faster than webpack) and shows a lot of promise.

Image and Font:

Next.js 13 has a better next/image since it:

  • Is faster as it ships less JavaScipt to client-side and doesn't need hydration.
  • Requires alt tag by default for better accessibility.
  • Easier to style.

Next.js 13 also introduces a font-system through which you can use any Google font, without sending request to Google from browser. Fonts are downloaded at build time and self-hosted in your project. This improves both privacy and performance.

SEO:

When sharing a blog-post or a page of website, you would've noticed a card like the one below:

Social card for SEO

This card is produced using <meta> tags in <head> section of page. The image is produced using

<meta property="og:image" content="img_url/path" />

. Vercel has created a new library, @vercel/og, that works with Next.js 13 to create dynamic social cards.

You can explicitly create profile cards using @vercel/og like this:

import { ImageResponse } from '@vercel/og';
export const config = {
  runtime: 'experimental-edge',
};
export default async function handler() {
  return ImageResponse(
    (
      <div
        style={{
          backgroundColor: '#fff',
          backgroundImage: 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
          backgroundSize: '100px 100px',
          height: '100%',
          width: '100%',
          textAlign: 'center',
          alignContent: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        <img
          alt="Vercel"
          width={255}
          height={225} 
src= "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE2IiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTU3LjUgMEwxMTUgMTAwSDBMNTcuNSAweiIgLz48L3N2Zz4="
          style={{ margin: '0 75px' }}
        />
        <div
          style={{
            fontSize: 60,
            marginTop: 30,
            lineHeight: 1.8,
          }}
        >
          Vercel Edge Network
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}
Enter fullscreen mode Exit fullscreen mode

The above code provides us with the card below for this url.
(Full code for the Next project)

Custom generated profile card

Backend updates:

Next.js being a full-stack framework, has brought some backend changes as well:

  • Middlewares
  • You can now use middleware to handle rewrite and redirect

Final thoughts:

Some of the features (like next/font) are still in beta and might take some time before they're production ready. Also, migration might not be that easy, considering the major changes happening in Next.js 13.

Although Next has provided a migration guide from v12 to v13, it might still be tricky to migrate from older versions.

But for new projects, Next.js 13 seems promising. It will be better in almost all aspects, be it user-experience, developer-experience or maintenance, for both developers and companies.

Top comments (3)

Collapse
 
theiter8 profile image
Ankit Sharma

Definitely a good summary on the whole conference. Personally, I think @vercel/og is the best feature and is a really creative initiative that it could be used almost everywhere.. No more manual labour of creating new designs on Canva!

Collapse
 
deveshanand18 profile image
Devesh Anand Srivastava

True, also saves a huge chunk of time to test whether the og tag images are showing up on all platforms or not xD.

Collapse
 
petrtcoi profile image
Petr Tcoi

Thanks

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post