Codemods

npx @next/codemod <transform> <path>

npx @next/codemod@latest app-dir-runtime-config-experimental-edge .

export const runtime = 'experimental-edge'

export const runtime = 'edge'

npx @next/codemod@latest next-async-request-api .

import { cookies, headers } from 'next/headers'
const token = cookies().get('token')

function useToken() {
  const token = cookies().get('token')
  return token
}

export default function Page() {
  const name = cookies().get('name')
}

function getHeader() {
  return headers().get('x-foo')
}

import { use } from 'react'
import {
  cookies,
  headers,
  type UnsafeUnwrappedCookies,
  type UnsafeUnwrappedHeaders,
} from 'next/headers'
const token = (cookies() as unknown as UnsafeUnwrappedCookies).get('token')

function useToken() {
  const token = use(cookies()).get('token')
  return token
}

export default async function Page() {
  const name = (await cookies()).get('name')
}

function getHeader() {
  return (headers() as unknown as UnsafeUnwrappedHeaders).get('x-foo')
}

// page.tsx
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  const { value } = searchParams
  if (value === 'foo') {
    // ...
  }
}

export function generateMetadata({ params }: { params: { slug: string } }) {
  const { slug } = params
  return {
    title: `My Page - ${slug}`,
  }
}

// page.tsx
export default async function Page(props: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const searchParams = await props.searchParams
  const { value } = searchParams
  if (value === 'foo') {
    // ...
  }
}

export async function generateMetadata(props: {
  params: Promise<{ slug: string }>
}) {
  const params = await props.params
  const { slug } = params
  return {
    title: `My Page - ${slug}`,
  }
}

npx @next/codemod@latest next-request-geo-ip .

import type { NextRequest } from 'next/server'

export function GET(req: NextRequest) {
  const { geo, ip } = req
}

import type { NextRequest } from 'next/server'
import { geolocation, ipAddress } from '@vercel/functions'

export function GET(req: NextRequest) {
  const geo = geolocation(req)
  const ip = ipAddress(req)
}

npx @next/codemod@latest next-og-import .

import { ImageResponse } from 'next/server'

import { ImageResponse } from 'next/og'

npx @next/codemod@latest metadata-to-viewport-export .

export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

export const metadata = {
  title: 'My App',
}

export const viewport = {
  width: 1,
  themeColor: 'dark',
}

npx @next/codemod@latest built-in-next-font .

import { Inter } from '@next/font/google'

import { Inter } from 'next/font/google'

npx @next/codemod@latest next-image-to-legacy-image .

import Image1 from 'next/image'
import Image2 from 'next/future/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

// 'next/image' تصبح 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' تصبح 'next/image'
import Image2 from 'next/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

npx @next/codemod@latest next-image-experimental .

npx @next/codemod@latest new-link .

<Link href="/about">
  <a>About</a>
</Link>
// يتحول إلى
<Link href="/about">
  About
</Link>

<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// يتحول إلى
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

const Component = () => <a>About</a>

<Link href="/about">
  <Component />
</Link>
// يصبح
<Link href="/about" legacyBehavior>
  <Component />
</Link>

npx @next/codemod cra-to-next

npx @next/codemod add-missing-react-import

export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

npx @next/codemod name-default-component

export default function () {
  return <div>Hello World</div>
}

export default function MyComponent() {
  return <div>Hello World</div>
}

npx @next/codemod withamp-to-config

// قبل
import { withAmp } from 'next/amp'

function Home() {
  return <h1>My AMP Page</h1>
}

export default withAmp(Home)

// بعد
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}

npx @next/codemod url-to-withrouter

import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}

import React from 'react'
import { withRouter } from 'next/router'
export default withRouter(
  class extends React.Component {
    render() {
      const { pathname } = this.props.router
      return <div>Current pathname: {pathname}</div>
    }
  }
)