Next.js 12迁移至Next.js13版本升级指南-五八三

一、前置

详见文档：Upgrading: Version 13 | Next.js (nextjs.org)

检查node版本

使用nvm切换node版本

最低node版本——v16.8

切换 git 分支

git checkout -b migration

升级next版本

npm install next@latest react@latest react-dom@latest

二、使用app router 替换 /pages

由于next13版本是向后兼容的，所以我们直接使用/pages 路由是可以正常使用的。

export default function Index()
{
    return <h1> Hello,Next13! </h1>
}

删除/pages目录下的_app.js文件

启动服务，效果如下

复制/pages目录下的index.js文件中的jsx代码，然后删除index.js文件

例如：

<div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>


        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>


        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>


          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>

将所有文件夹剪切到app目录后，删除/pages目录

此时，文件目录如下：

5. 将复制到jsx粘贴到/app/page.js下，并引入样式文件。并重新运行项目(npm run dev)，Next.js将自动生成layouts.js文件

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Index(){
    return  <div className={styles.container}>
    <Head>
      <title>Create Next App</title>
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
    </Head>


    <main className={styles.main}>
      <h1 className={styles.title}>
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </h1>


      <p className={styles.description}>
        Get started by editing{' '}
        <code className={styles.code}>pages/index.js</code>
      </p>

      <div className={styles.grid}>
        <a href="https://nextjs.org/docs" className={styles.card}>
          <h2>Documentation &rarr;</h2>
          <p>Find in-depth information about Next.js features and API.</p>
        </a>


        <a href="https://nextjs.org/learn" className={styles.card}>
          <h2>Learn &rarr;</h2>
          <p>Learn about Next.js in an interactive course with quizzes!</p>
        </a>

        <a
          href="https://github.com/vercel/next.js/tree/master/examples"
          className={styles.card}
        >
          <h2>Examples &rarr;</h2>
          <p>Discover and deploy boilerplate example Next.js projects.</p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          className={styles.card}
        >
          <h2>Deploy &rarr;</h2>
          <p>
            Instantly deploy your Next.js site to a public URL with Vercel.
          </p>
        </a>
      </div>
    </main>

    <footer className={styles.footer}>
      <a
        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
        target="_blank"
        rel="noopener noreferrer"
      >
        Powered by{' '}
        <span className={styles.logo}>
          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
        </span>
      </a>
    </footer>
  </div>
}

效果如下：

6. 成功将项目迁移至 App Router路由

三、 Migration Next13 routing hooks

App Router模式下，使用3个新hooks

'use client'
 





import { useRouter, usePathname, useSearchParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
 





  // ...
}

isFallback已被删除，因为已被替换。fallback
basePath已被删除。替代项将不是的一部分。它尚未得到执行。
asPath已删除，因为已从新路由器中删除了的概念。
isReady已被删除，因为它不再需要。在静态渲染期间，任何使用useSearchParams()hook 将跳过预呈现步骤，而是在运行时在客户端上呈现。

详读文档：Functions: useRouter | Next.js (nextjs.org)

四、Migration Data Fetching methods

在app目录中，我们可以使用服务器组件将数据获取放在 React 组件中。这允许我们向客户端发送更少的JavaScript，同时维护从服务器呈现的HTML。

服务端渲染

以前版本

// `pages` directory



 





export async function getServerSideProps() {
  const res = await fetch(`https://...`)

  const projects = await res.json()

 



  return { props: { projects } }

}




 





export default function Dashboard({ projects }) {
  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  )
}

新版本：

// `app` directory



 





// This function can be named anything

async function getProjects() {

  const res = await fetch(`https://...`, { cache: 'no-store' })
  const projects = await res.json()

 


  return projects

}

 

export default async function Dashboard() {
  const projects = await getProjects()

 


  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  )
}

访问请求对象

以往版本

// `pages` directory



 





export async function getServerSideProps({ req, query }) {
  const authHeader = req.getHeaders()['authorization'];
  const theme = req.cookies['theme'];
 



  return { props: { ... }}
}




 





export default function Page(props) {
  return ...
}

新版本

// `app` directory



import { cookies, headers } from 'next/headers'
 


async function getData() {
  const authHeader = headers().get('authorization')
 



  return '...'
}




 





export default async function Page() {
  // You can use `cookies()` or `headers()` inside Server Components
  // directly or in your data fetching function
  const theme = cookies().get('theme')
  const data = await getData()
  return '...'
}

静态站点生成

以往版本

// `pages` directory



 





export async function getStaticProps() {
  const res = await fetch(`https://...`)

  const projects = await res.json()

 



  return { props: { projects } }

}




 





export default function Index({ projects }) {
  return projects.map((project) => <div>{project.name}</div>)
}

新版本

// `app` directory



 





// This function can be named anything

async function getProjects() {

  const res = await fetch(`https://...`)
  const projects = await res.json()

 


  return projects

}

 

export default async function Index() {
  const projects = await getProjects()

 


  return projects.map((project) => <div>{project.name}</div>)
}

动态路径

以往版本

// `pages` directory



import PostLayout from '@/components/post-layout'

 


export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
  }
}




 





export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 


  return { props: { post } }
}

 
export default function Post({ post }) {
  return <PostLayout post={post} />

}

新版本

// `app` directory



import PostLayout from '@/components/post-layout'

 


export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }]
}
 


async function getPost(params) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  return post
}
 
export default async function Post({ params }) {
  const post = await getPost(params)
 
  return <PostLayout post={post} />

}

其他Data Fetching 更改，详见官方文档：Building Your Application: Data Fetching | Next.js (nextjs.org)

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END