Next.js 13 is here – Dev Community

Next.js 13 was recently announced with a plethora of new (and developed) features in NextConfidence, which improve the quality, efficiency of frontend code for software companies (and developers) like ours (itmtb.com). Will make writing and maintaining process easier. and readability of the code.

Some of those features:

Server-side components by default:

remember to use getStaticProps, getStaticPaths And getServerSideProps, Well, they will be obsolete in the next 13. Now is this a good move? In most cases, yes. For example take the simple code below:

next <= 12 vs next 13 . in server side props

In addition to making the code more readable, server-side components also bring other benefits, such as reducing the client-side JavaScript bundle.

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

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

Client-side components in the next 13

Client-side components in the next 13

An awesome layout system:

Next.js 13 introduces a new layout system at the root level.

For example, now we can have a custom layout for all pages /blog way. just enter layout layput.{js/jsx/ts/tsx} below blog in the folder pages (either app In next.13) directory.

You can also have a custom error component, or a loading component, depending on the routes. It definitely makes the developer experience better and easier. Layouts also preserve state and do not re-render.

In-depth explanation of the layout in the next 13:

Turbopack:

To be honest, Webpack has been an essential part of the web, but over time it has shown its drawbacks. It has its fair share of non-fixable issues and it has hit the cap for the performance of Bundler written in JavaScript.

Turbopack, a bundler written in Rust, claims to solve this issue. As Vercell claims, it does:

  • Updates up to 700x faster than webpack
  • Vit. 10 times faster updates than
  • 4x faster cold starts than webpack

The benchmarks themselves are debatable, as are TurboPack claiming to be 10x faster than Vite:

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

Image and font:

Next.js is better in 13 next/image since:

  • is faster because it sends less JavaScript to the client-side and doesn’t require hydration.
  • Is necessary alt Tag by default for better accessibility.
  • Easy to style.

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

SEO:

When sharing a blog-post or website page, you may have seen a card like the one below:

Social Cards for SEO

This card is drawn using <meta> tag in <head> section of the page. The image has been created using

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

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

You can clearly create profile card using this @vercel/og hence:

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 the below card for this url.
(full code for next project)

Custom Generated Profile Card

Backend Updates:

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

  • middlewares
  • Now you can use middleware to handle rewrite And redirect

final thoughts:

Some features (eg next/font) are still in beta and may take some time to be ready for production. Also, given the major changes happening in Next.js 13, the migration may not be that easy.

Although NeXT has provided a migration guide from v12 to v13, it can be difficult 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.

Leave a Comment