What do We need to Know About Next.js 13?

For someone who doesn’t know about me, I am a jr. front-end developer who codes React, Next.js, and Svelte simultaneously at the job. My main stack is Next.js so I will share what we need to know about brand-new Next.js 13.

If you don’t know about it, Vercel is the creator of Next.js. They made a conference 3 days ago and Next.js 13 was released with it. Next.js is kinda king for the SSR world so we must know what the new version brings to us. It’s mostly DX (Developer Experience), so we will like it. 🎉

What is New on Next.js 13?

Vercel brings a lot of details for us to work more comfortably. They are shortly;

• app/ Directory (beta) : Easier, faster, less client JS.
  - Layouts
  - React Server Components
  - Streaming
• Turbopack (alpha) : Up to 700x faster Rust-based Webpack replacement.
• New next/image (stable) : Faster images with native lazy loading.
• New @next/font (beta) : Automatic self-hosted fonts with no layout shift.
• Improved next/link : Simplified API for <Link> component.

app/ Directory (beta)

Next.js already has a great file system with an automatic router. When you drop a file inside a folder, it instantly creates routes in our applications. No configurations are needed.

With Next.js 13, the file system is even better. You can create layouts easier and it makes you create UI so much faster. Also, with new server components, you can make server-first dynamic applications dynamically. And now we have async Server Components and extended fetch API enables component-level fetching.

Turbopack (alpha)

Next.js 13 brings us Turbopack, the new Rust-based successor to Webpack. Using the Turbopack alpha with Next.js 13 makes your app updates 700x faster than Webpack, 10x faster than Vite, and 4x faster cold starts than Webpack.

Do you understand what means 700x faster than Webpack? It’s a revolution! 😍

next/image

The new version of Next.js introduces a powerful new Image component. It allows us to easily display images without layout shifts and optimize files for increased performance.

The new Image component;

• Ships less client-side JavaScript,
• Easier to style and configure,
• More accessible requiring alt tags by default,
• Align with the Web platform,
• Faster because native lazy loading doesn’t require hydration anymore.

next/link

The new next/link component no longer requires manually adding <a> tag as a child. It was needed already a long time ago!

Next.js 13 system requirements

Node.js 14.6.0 or newer,
MacOs, Windows, and Linux are supported.

Next.js 13 breaking changes

• The minimum React version has been bumped from 17.0.2 to 18.2.0.
• The minimum Node.js version has been bumped from 12.22.0 to 14.6.0 since 12.x has reached end-of-life (PR).
• The swcMinify configuration property was changed from false to true. See Next.js Compiler for more info.
• The next/image import was renamed to next/legacy/image. The next/future/image import was renamed to next/image. A codemod is available to safely and automatically rename your imports.
• The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.
• Routes are no longer prefetched when the User-Agent is a bot.
• The deprecated target option of next.config.js has been removed.
• The supported browsers have been changed to drop Internet Explorer and target modern browsers. You can still use Browserslist to change targeted browsers.
• Chrome 64+
• Edge 79+
• Firefox 67+
• Opera 51+
• Safari 12+

Last Thoughts

So, of course, I am not someone who codes with Next.js for years but I tried to share news about it as a jr. front-end developer. There are still too many like me, and I believe we must stay updated in the sector.

If you like the content, you can support me through the tips below. Also, don’t hesitate to share your opinions in the comment! See you in the next content.