next.js 13+新特性

react 2023年新文档 传送门

项目创建

使用官网推荐的创建方式来创建一个默认的Next.js应用

npx create-next-app@latest

项目规范

安装方式参考 ESLint + Prettier + husky + lint-staged+Commitizen

路由差异

cra: 需要下载react-router-dom
next.js 自动生成路由

next.js12	next.js13
pages/index.js	app/page.js / app/about/page.js / app/about/new/page.js

动态路由：next/link

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

csr,ssr渲染讲解传送门

工具类：Tailwind CSS官网链接

介绍：只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。