next.js是一个构建react的开发框架，可以快速创建react应用程序。
从0-1尝试使用next.js创建一个react应用,并引入基于文件的路由
官网地址www.nextjs.cn/learn/basic…

一、创建项目

创建一个react-next-demo项目

npx create-next-app
cd react-next-demo
npm run dev

npm run dev并不总是成功，如果起不来项目尝试换个node版本，我使用18.16.0

二、配置路由

next.js和create-react-app创建的项目不同，不需要单独进行路由配置

next.js和create-react-app(CRA)区别
CRA是一个脚手架，next.js是react的一个框架
CRA它将webpack和babel封装在一起，组成一个新的脚本工具react-scripts来管理整个应用，扩展起来很难，可以选择第三方工具如craco。next.js允许自定义babel和webpack.
CRA路由配置自由，可以选择自己喜欢的库。next.js会将pages目录下js文件，根据其路径名和文件名自动生成对应的路由

2.1目录结构如下，pages文件夹要放在根目录下

├── .next // 项目运行后会自动生成next目录
│   ├── build-manifest.json 
│   ├── react-loadable-manifest.json 
│   ├── server 
│   └── static 
├── components 
│   ├── head.js 
│   └── nav.js 
├── pages 
│   ├── a.js 
│   └── index.js 
├── static // 用于存放静态文件，比如图片，css,favicon,icon
│   └── favicon.ico 
├── server.js 
├── .babelrc  // 用于存放babel配置
├── .gitignore 
├── next.config.js // 用于存放next配置
├── package.json 
├── README.md 
└── yarn.lock

通过http://localhost:3000/a 可访问

2.2页面跳转Link

import Link from "next/link";
export default function Post() {
  return (
    <h1>
      First Post
      <Link href="/post/first-post">
        跳转到第二页面!
      </Link>
    </h1>
  );
}

Link通过React.Children.only规定了它所包含的元素只能有一个
Next.js自动进行代码拆分，因此每个页面只加载该页面所需的内容。这意味着在渲染主页时，其他页面的代码不会被立即提供。

这确保了即使添加了数百个页面，主页也能快速加载。

仅加载您请求的页面的代码还意味着页面变得隔离。如果某个页面出现错误，应用程序的其余部分仍将正常工作。

此外，在Next.js的生产构建中，当Link组件出现在浏览器的视口中时，Next.js会自动在后台预取链接页面的代码。当您点击链接时，目标页面的代码已经在后台加载完成，并且页面转换将近乎即时！