Next.js 13 beta released

The long-anticipated major update of the popular JavaScript framework, Next.js, has finally arrived.

Let's see what's new.

System requirements

 

• Node.js 14.6.0 or newer

• Linux, macOS or Windows (including WSL)

 

Native support for custom images and fonts

 

Improved performance, on-demand image resizing, and images loaded only when they are in the viewport, just to name a few improvements to the image handling in Next.js 13.

The fonts now include automatic self-hosting for any font file, improving performance and UX.

 

Script optimisation

 

The script component (next/script) allows loading third-party scripts anywhere in the Next.js app, including inline scripts.

Scripts can also be offloaded to a worker by adding strategy="worker", like so:

import Script from 'next/script'  
export default function MyPage() {   
  return (
    <>       
      <Script 
        src="https://example.com/script.js" 
        strategy="worker" 
      />
    </>
  ) 
}

However, this is an experimental feature and must be turned on in next.config.js.

 

Routing

Routing is now redone and route files and directories are live (optionally) in the app/ directory. Layouts, error handling and loading states are also easier to work with.

 

Turbopack

Turbopack is replacing Webpack. Turbopack is 4 times faster on cold start than Webpack and handles updates 700 times faster than Webpack. Turbopack supports TypeScript, JSX, CSS and others out of the box.

 

Conclusion

The newly introduced features seem to be inspired by SvelteKit.

Either way, these are genuinely refreshing features in Next.js and will make creating websites more pleasant.

------------------------------------------------------------------------------------

Next.js is created by Vercel. The Next.js logo used in this article is under a CC licence.