Introduction

This afternoon, I upgraded our company's project from Next.js 12 to Next.js 13. The Next.js release cycle is really fast, and Next.js 13 brings us several new features:

• A new web build tool, Turbopack (Rust-based), which improves site build performance (at least 3x faster, according to official data).
• Simplified next/link syntax => it now renders its own <a> tag, so you no longer need to wrap it in one.
• A rewritten next/image component => it now uses the browser's native lazy loading. Older versions of Safari will fall back to preloading. The layout attribute has been removed, and the alt attribute is now mandatory.
• next/font => makes it easier to load Google Fonts.
• Initial support for async Server Components
• Fixes for various framework bugs.

Testing Build Performance

In my test of the site build (npm run build), the speed nearly doubled. Next.js 12 local build: 1 minute 40 seconds
Next.js 13 local build: 56 seconds
Upgrading to Next.js 13 brought a noticeable improvement in page rendering performance.

Next Image

New syntax for loading images. Every Image component now requires an alt prop, or it will throw an error. New Image component examples

import Image from 'next/image';

<Image
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
></Image>

However, since Next.js 13 removed the layout prop from Image, the layout on many of our pages broke. Most cases can be fixed by following the example below.

<Image
alt=""
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
style={{
width: '100%',
height: 'auto',
}}
></Image>

New syntax for responsive images

<Image
alt=""
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
sizes="100vw"
style={{
width: '100%',
height: 'auto',
}}
></Image>

If you can't upgrade right away, you can still use the old Image component

 import Image from next/legacy/image

next/link Changes

Old syntax

<Link href="/about">
  <a>About</a>
</Link>

New syntax

<Link href="/about">
  About
</Link>

P.S. You can modify your next.config.js to keep the Next.js 12 syntax (not recommended, as the new version fixes link-related bugs).

 experimental: {
       newNextLinkBehavior: false,
 },