Next.js 13 is here
Tags: javascript, react, nextjs, jamstack
Published: 2022-11-06 18:03:23

Next.js 13 was announced recently at [Next conf](https://nextjs.org/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](https://www.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:

<figure>
  <img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl5ui1wkn426r0625b4f.jpg"
  alt="Server side prop in Next <=12 vs Next 13">
  <figcaption>Server side prop in Next <=12 vs Next 13</figcaption>
</figure>

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.

<figure>
  <img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d9lwky28nk6scoewyso.png"
  alt="Client-side component in Next 13">
  <figcaption>Client-side component in Next 13</figcaption>
</figure>

## 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:
{% embed https://youtu.be/6mQ3M1CUGnk %}

## Turbopack:

Let's be honest, [webpack](https://webpack.js.org/) 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](https://medium.com/hurb-labs/the-problem-with-webpack-8a025268a761) and it has hit the cap for performance for a bundler written in JavaScript.

[Turbopack](https://vercel.com/blog/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](https://vitejs.dev/):

{%embed https://twitter.com/youyuxi/status/1586317587348017152?s=20&t=BvF7-aS9ZSAxT0NR1-CDlg %}

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](https://nextjs.org/blog/next-13#nextfont) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttoeeafp4cc5cmroqsqn.png)

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:

```javascript
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,
    }
  );
}
```

The above code provides us with the card below for [this url](https://vercel-og-nextjs-one-phi.vercel.app/). 
([Full code for the Next project](https://github.com/devesh-anand/vercel-og-nextjs))

![Custom generated profile card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m1aj0nv9qyulacsmpv7.png)

## 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](https://beta.nextjs.org/docs/upgrade-guide), 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.