NextJS 是一个 React 框架，它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅，首先自然是安装它，然后来一个「你好，NextJS」
安装 NextJS
和 React 一样，NextJS 官方也提供了一个快速生成 NextJS 项目的脚手架工具： create-next-app
yarn create next-app 项目名
它会有一个交互式的过程，下面进行演示：
> yarn create next-app axum-rs-hello-nextjs
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "[email protected]" with binaries:
- create-next-app
? Would you like to use TypeScript with this project? › No / Yes 【询问你是否使用 TypeScript，请根据你的实际情况选择，本专题使用 Javascript，所以选择“No”「使用键盘上的左右箭头键进行选择，下同」】
? Would you like to use ESLint with this project? › No / Yes 【询问你是否使用 ESLint，它会对一些不符合要求的代码进行提示，本专题选择“Yes”】
Creating a new Next.js app in /Users/axum.rs/projects/axum-rs-hello-nextjs.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
- eslint
- eslint-config-next
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍 Resolving packages...
等待它执行完毕就行了。
目录结构
├── README.md
├── next.config.js -- nextjs 配置文件
├── package.json
├── pages -- 放置页面
│ ├── _app.js -- 主组件
│ ├── api -- 如果需要提供 api 给外界，放置到这里
│ │ └── hello.js -- 一个 api 的 demo
│ └── index.js -- 首页
├── public -- 静态资源
│ ├── favicon.ico
│ └── vercel.svg
├── styles -- 样式
│ ├── Home.module.css -- 首页的样式【CSS模块化】
│ └── globals.css -- 全局样式
└── yarn.lock
- 和我们介绍的 React 目录结构一样，NextJS 也遵循（而且是近乎强制地遵循）
- 所有页面放在
pages目录 - 组件放在
components目录。这里并没有这个目录，在你需要开发组件时，手动创建
- 所有页面放在
pages/_app.js：你可以把它视为React 主组件，你在 NextJS 中编写的所有页面（比如此处的pages/index.js），最终都会变成它的子组件进行渲染- 它是 nextjs 的一个特殊文件。nextjs 提供了很多以下划线开头的特殊文件
_app.js：允许开发人员自定义App主组件_document.js：允许开发人员自定义整个文档结构- 当下，你不应该把注意力放在这上面，学完本专题再回来看吧
- 样式。NextJS 对样式有两个非常重要的强制规范
globals.css全局样式，用于定义整个应用公用的样式。👉 它只能在pages/_app.js里进行导入，其它文件里试图导入它将报错Home.module.css对应首页pages/index.js的样式，注意，它是模块化的- 在NextJS中，除了全局样式外(
globals.css)，组件或页面的样式必须采用模式块化的CSS - 模块化CSS是为了避免样式冲突——它会自动给本模块的CSS样式加上前缀（通过打包工具）
- 有关模块化CSS的介绍你可以自行搜索，这里提供一个参考。
- 在NextJS中，除了全局样式外(
- 由于本专题最终会使用 tailwind，所以整个项目都只会保留
globals.css，几乎不存在为某个组件或页面编写的样式。所以本专题的项目中，只有一个globals.css样式文件，请知悉——欲知原因，请继续学习，下一个子专题就是tailwind。
- 类似 React 的那个入口文件被nextjs隐藏了，现下的你不用去关心它
除了 create-next-app ，你也可以手动安装，这里不再进行演示（毕竟本站长没有受虐倾向，主动去肉身趟雷），你可以查看官方文档
你好，NextJS
打开刚刚创建的项目，并将 pages/index.js 的内容改为：
恭喜你，成功进入 NextJS 的魔法世界。
NextJS 瘦身
- 上面的链接是使用stackblitz提供的模块创建的，stackblitz本身就作了一些精简
- 根据我们项目的实际情况，再次作了精简：
- 删除了
api目录，我们并不会提供任何API给外界 - 删除了
styles/Home.module.css：我们最终是使用 tailwind，只需全局样式文件就行了 - 清空了
styles/globals.css的内容，原因同上。只是现在还不到引入 tailwind 的时候
- 删除了