【NextJs】NextJs是什么

鑫宝Code
685 阅读3分钟

楼主目前投递了一些远程工作，很多公司的技术栈中都有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 applications with the power of React components

总结就是用的公司多，框架水平NB，经住了很多项目的磨练。然后官网就给出了NextJs学习教程,做一个Dashboard网站。

如果要看这个教程的话：可以看我做好的Github仓库，可以体验下线上效果以及对应的中文教程。教程的有些代码有点问题，可以对照我的仓库进行学习，食用更佳。 链接在此：github.com/XinBaoCode/…

个人觉得官网的解释还不是很有说服力，于是找了一些比较好的文章。

总结就是服务端渲染+完善的工程化机制

为什么学习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 并对性能优化做出最佳实践

如何学习NextJs

由于官方教程已经很详细了，楼主就建议如下学习方式，学习效果不错。

  1. 直接接学习Next官方的实战教程，链接：nextjs.org/learn 。
  2. 然后遇到一些问题去看Next的一些文档，这里我推荐中文的Next文档，链接：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的相关配置文件。
avatar
文章
阅读
粉丝