DEV Community

Cover image for Upgrading to Next.js 13: Migration Guide

Posted on


Upgrading to Next.js 13: Migration Guide

Hey there! Are you ready to upgrade your Next.js application from version 12 to version 13 (stable)? Don't worry, I got you covered. This guide will help you upgrade features that work in both the pages and the app directories, and incrementally migrate your existing application from pages to app. Let's get started!


Node.js Version

First things first, the minimum Node.js version is now v16.8. Check the Node.js documentation for more details.

Next.js Version

To update to Next.js version 13, just run this command using your favorite package manager:

npm install next@latest react@latest react-dom@latest
Enter fullscreen mode Exit fullscreen mode

ESLint Version

If you're using ESLint, you'll need to upgrade your ESLint version:

npm install -D eslint-config-next@latest
Enter fullscreen mode Exit fullscreen mode

Note: You may need to restart the ESLint server in VS Code for the ESLint changes to take effect. Open the Command Palette (cmd+shift+p on Mac; ctrl+shift+p on Windows) and search for ESLint: Restart ESLint Server.

Upgrading New Features

Next.js 13 introduced the new App Router with new features and conventions. The new Router is available in the app directory and co-exists with the pages directory.

Upgrading to Next.js 13 does not require using the new App Router. You can continue using pages with new features that work in both directories, such as the updated Image component, Link component, Script component, and Font optimization.

<Image/> Component

Next.js 12 introduced new improvements to the Image Component with a temporary import: next/future/image. These improvements included less client-side JavaScript, easier ways to extend and style images, better accessibility, and native browser lazy loading.

In version 13, this new behavior is now the default for next/image.

<Link> Component

The <Link> Component no longer requires manually adding an <a> tag as a child. This behavior was added as an experimental option in version 12.2 and is now the default. In Next.js 13, <Link> always renders <a> and allows you to forward props to the underlying tag.

<Script> Component

The behavior of next/script has been updated to support both pages and app, but some changes need to be made to ensure a smooth migration.

Font Optimization

Version 13 introduces the new next/font module (beta) which gives you the ability to customize your font loading experience while still ensuring great performance and privacy. next/font is supported in both the pages and app directories.

Top comments (0)