What's New in Next.js | Frontend Weekly vol. 127

1 A quick overview of what’s new with Next.js

At the end of October, a real revolution came to Next.js. After months of iterations on the RFC, a brand new router was released in Next.js 13. Among other things, it introduced Layouts and refreshed error/load handling. However, the biggest news was that the router was build around React Server Components – still heavily experimental technology. It will soon be six months since the debut of Next.js 13 – two major updates have been releases in that time, and it’s high time we took a closer look at them.

Source: https://twitter.com/housecor/status/1631296202409902086

If you want to catch up on Next.js 13 and React Server Components, I recommend:

The future is now – Next.js 13 | Frontend Weekly vol. 110 Make use of `use` in React – a new hook is coming | Frontend Weekly vol. 109 How React server components work: an in-depth guide

Metadata API

We usually reach for Server Side Rendering when we need to take care of the SEO. It’s surprising that Next.js has only now decided to properly take care of the generation of metadata, which is crucial for SEO. The new Metadata API allows you to export a metadata variable at any level of routing, and the framework will take care of putting them together with all the variables found in the current path.

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
    ],
    locale: 'en-US',
    type: 'website',
  },
};

Statically typed links

Types support in the <Link /> component is also interesting. During compilation, based on the current directory structure, Next.js will generate a type corresponding to all possible paths in our application. As a result, we will find out about typos and other minor errors at the very first stage of application testing. Also, modifying the directory structure will be safer than ever before.

import type { Route } from 'next';
import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />

// ❌ TypeScript errors if href is not a valid route
<Link href="/aboot" />

Rest API

One of the most frequently cited shortcomings of the new router was support for REST queries. Next.js 13.2 brought a solution to this problem as well. We put the code that handles REST queries in the route.js file. Exported method names should be one of GET, HEAD, OPTIONS, POST, PUT, DELETE, or PATCH.

import { cookies } from 'next/headers';

export async function GET(request: Request) {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token}` },
  });
}

The fight against bundle size continues

Applications based entirely on React Server Components promised almost zero bundle-size sent to the client. So in theory, the amount of code sent to the client in Next.js 13 should beat both Next.js 12 and all the competition. In practice, it turned out not to be true. Fortunately, Next.js 13.1 brought the first large bundle optimizations package. Importantly, the authors state that they have not yet said the last word on the matter.

Sources

Next.js 13
Next.js 13.1
Next.js 13.2

2. Chrome optimazies for battery lifetime

Safari is known for being the Internet Explorer of our time. Firefox is known for not really being used by anyone. Chrome is known for devouring RAM and battery.

Unfortunately, it seems that none of these stereotypes are true.

In the previous edition of our report, we informed you about the big changes heading to Safari. This week it’s time for news on the browser from Google. An optimization package has just been released for the latest Chrome, which focuses on reducing power consumption and thus increasing battery life. Benchmarks conducted by Google show that a MacBook Pro with an M2 on board will last 17 hours of Chrome usage. If you are curious about optimization details, you can find the information in the article below.

Do more with Chrome on a single charge on MacBooks

3 How Sentry team moved from Encyme to React Testing Library

To conclude today’s extremely short weekly report, we have a small recommendation for you. Sentry has migrated from Enzyme to React Testing Library over the past few months. If you are curious about what obstacles they encountered and how the whole process went, you can find the answers in the article below.

Sentry’s Frontend Tests: Migrating from Enzyme to React Testing Library

What’s New in Next.js | Frontend Weekly vol. 127