一、项目创建

1.1 创建项目

1. 使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。

npx create-next-app@latest# oryarn create next-app

2. 如果你希望使用 TypeScript 开发项目，可以通过 –typescript 参数创建 TypeScript 项目

npx create-next-app@latest --typescript# oryarn create next-app --typescript

3. 创建过程中会提示选择项目配置，截图如下

  • 项目名称，这里输入react_next_pro。
  • 项目是否需要使用Typescript。
  • 项目是否需要使用ESLint。
  • 是否需要在项目中使用src目录，不使用src目录默认会把所有文件放在根目录，为了方便开发，这里启用src目录。
  • 是否在src目录下启用app目录，默认会放一些框架相关的东西。这里启用之后会在app目录中生成首页内容。
  • 是否启用路径别名，方便使用。

4. 项目创建成功，安装项目所需环境

npm install next react react-dom# oryarn add next react react-dom

5. 修改 package.json 配置文件

"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"}

6. 启动项目：

  • 运行 npm run dev 或 yarn dev 来启动开发服务器，访问地址为 http://localhost:3000。

1.2 项目目录结构

1. 目录结构如下

  • 访问 http://localhost:3000/home 可以进入 pages/home/index.jsx 页面
  • 访问 http://localhost:3000/profile 可以进入 pages/profile/index.jsx 页面

2. 目录详细介绍

  • .next目录。这是Nextjs的缓存目录，在执行dev或者build等命令的时候，会在本地项目的根目录下生成此目录，开发不需要关注。想要了解更多的可以稍微研究一下，使用缓存/已生成的方式加速编译。
  • .vscode目录。看名字就知道，这个是vscode编辑器使用到的配置目录。
  • public目录。这个主要放置静态资源，默认没有二级目录，为了方便可以简单创建几个目录来放相关资源。默认路径是在根目录，使用的时候可以使用类似/favicon.ico的形式引用。
  • src目录。这个目录是主要源代码的位置，初始目录下有app默认页和pages其他页面目录。在pages目录下还有一个默认api目录，主要放置Nextjs提供的服务端API。
  • next.config.js。Nextjs的配置文件，这里默认只有appDir参数。

总结：至此，next项目创建完毕，大家动手操作起来吧~~