一、项目创建
1.1 创建项目
1. 使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。
npx create-next-app@latest
# or
yarn create next-app
2. 如果你希望使用 TypeScript 开发项目，可以通过 --typescript 参数创建 TypeScript 项目
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
3. 创建过程中会提示选择项目配置，截图如下
- 项目名称，这里输入react_next_pro。
- 项目是否需要使用Typescript。
- 项目是否需要使用ESLint。
- 是否需要在项目中使用src目录，不使用src目录默认会把所有文件放在根目录，为了方便开发，这里启用src目录。
- 是否在src目录下启用app目录，默认会放一些框架相关的东西。这里启用之后会在app目录中生成首页内容。
- 是否启用路径别名，方便使用。
4. 项目创建成功，安装项目所需环境
npm install next react react-dom
# or
yarn 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. 目录结构如下
文章来源：https://www.toymoban.com/news/detail-490088.html
- 访问
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项目创建完毕，大家动手操作起来吧~~文章来源地址https://www.toymoban.com/news/detail-490088.html
到了这里，关于nextjs系列教程(二)：项目创建及目录结构的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
