[Next.js 13 공식 문서 App Router] - Upgrading

Upgrading

---

Codemods

  - Transformations that run on our codebase programmatically

Usage

Next.js Codemods

---

App Router Migration

Upgrading

  - Node.js Version

    - minimum Node.js version is now v16.14

  - Next.js Version

  - ESLint Version

Next Steps

Upgrading New Features

  - <Image /> Component

  - <Link /> Component

    - No longer requires manualy adding an <a> tag as a child

  - <Script /> Component

  - Font Optimization

Migrating from pages to app

  Step 1: Creating the app directory

  Step 2: Creating a Root Layout

  Step 3: Migrating next/head

  Step 4: Migrating Pages

    - Step 1: Create a new Client Component

    - Step 2: Create a new page

  Step 5: Migrating Routing Hooks

  Step 6: Migrating Data Fetching Methods

  Step 7: Styling

Codemods

---

From Vite

Why Switch?

  1. Slow initial page loading time

  2. No automatic code splitting

  3. Network waterfalls

  4. Fast and intentional loading states

  5. Choose the data fetching strategy

  6. Middleware

  7. Built-in Optimizations

Migration Steps

  Step 1: Install the Next.js Dependency

  Step 2: Create the Next.js Configuration File

  Step 3: Update TypeScript Configuration

  Step 4: Create the Root Layout

  Step 5: Create the Entrypoint Page

  Step 6: Update Static Image Imports

  Step 7: Migrate the Environment Variables

  Step 8: Update Scripts in package.json

  Step 9: Clean Up

Next Steps