楼主目前投递了一些远程工作，很多公司的技术栈中都有NextJs，楼主在阿里工作的时候几乎没有听过这个框架，也只有看一些技术文章时才偶尔看到这个框架，所以带着对这个框架的好奇，于是撰写了这篇文章。
什么是NextJs
首先查看NextJs官网给出了如下的解释(官网地址: nextjs.org)：
The React Framework for the Web. Used by some of the world's largest companies, Next.js enables you to create
high-quality web applicationswith the power of React components
总结就是用的公司多，框架水平NB，经住了很多项目的磨练。然后官网就给出了NextJs学习教程,做一个Dashboard网站。
如果要看这个教程的话：可以看我做好的Github仓库，可以体验下线上效果以及对应的中文教程。教程的有些代码有点问题，可以对照我的仓库进行学习，食用更佳。
链接在此： https://github.com/XinBaoCode/nextjs-dashboard
个人觉得官网的解释还不是很有说服力，于是找了一些比较好的文章。
总结就是服务端渲染+完善的工程化机制
为什么学习NextJs
那么多的前端框架，React, Vue, Angular, Svelte, 为何要多学一门NextJs呢
React+Vercel官方背书
React于官方文件内的“推荐的工具链”中提及Next.js，建议将其作为“使用Node.js构建服务器渲染网站”的解决方案。而Vercel和Next都是由同一家公司创建的，部署极为方便
- 许多公司在用,经住了很多项目的磨练。
我们学好NextJs的话，容易找到相关的工作。
NextJs框架的优势，向全栈进发！- 服务端渲染 -> 提高性能，方便
SEO - 性能优化 -> 自动拆分代码 + 支持组件的懒惰加载 + 构建更快等。
- 内置特性易用且极致 -->
next/image+next/link等组件
当然NextJs中也有一定的劣势
- 页面响应相对于SPA而言更慢 --> 因为页面资源分页面按需加载
- 开发体验不够友好 --> 开发环境下 NextJS 根据当前页面按需进行资源实时构建
如何学习NextJs
由于官方教程已经很详细了，楼主就建议如下学习方式，学习效果不错。
- 直接接学习Next官方的实战教程，链接：https://nextjs.org/learn 。
- 然后遇到一些问题去看Next的一些文档，这里我推荐中文的Next文档，链接：https://www.nextjs.cn/docs
NestJs目录结构
相关目录结构如下所示，可能不同Next版本会有区别
. ├── .next # Next.js的缓存目录，执行run dev和build时生成的 ├── .vscode # Vscode的配置目录 ├── app # 路由页面，相当于以前版本的page ├── node_modules # 依赖库 └── public # 放置静态资源 └── src # 可选的文件夹，一般会把pages和app放到里面 ├── .eslintrc.json # ESLint 配置文件 ├── .gitignore # 忽略的 Git 文件和文件夹 ├── next-env.d.ts # Next.js的TS声明文件 ├── next.config.mjs # Next.js 项目中的配置文件，用于定义一些构建和配置选项 ├── package-lock.json # 项目配置 PostCSS 的配置文件依赖lock文件 ├── package.json # 项目npm相关文件 ├── pnpm-lock.yaml # pnpm安装的依赖lock文件 ├── postcss.config # 配置 PostCSS 的配置文件 ├── README.md # 项目说明文档 ├── tailwind.config # 配置 Tailwind CSS 框架的各种选项和设置 ├── tsconfig.json # ts的相关配置文件。
