◢这几天静下心来学习nextjs（当前next版本为：9.5.3），感觉很惊喜。

next非常容易入门，官网有完整的入门实践步骤，对新手非常的友好；
五分钟不到就可以拥有一个稍稍复杂的nextjs应用；
nextjs是基于react的全栈框架，在里面既可以前端也可以写后端代码；
前端开发可以很好地体验和实践ssr。

注意：本文是对nextjs的科普，具体内容一定要以官网为准哦！

前提

next.js是基于react的nodejs开发框架，所以学习next前，你需要

node: ^1.13
了解react 函数组件

目前nextjs的社区活跃度非常高，有愈演愈烈的趋势，所以，如果你有以上的“简单”的经验，非常推荐走一下nextjs的demo。

学习路线

想要简单、笼统的了解next，真心非常的方便，因为next为初学者定制了很有意思的学习路线：用nextjs完成一个简单的个人博客。

so 你还没用拥有属于自己的博客，这可是非常难得的机会，跟着提示一步一步往下学习，就可体验到nextjs套装带给你的无限乐趣。

学习、博客两手抓，事业爱情双开花！

我的学习实物产出：nextjs-blog-one-opal.vercel.app/

next博客学习链接：www.nextjs.cn/learn/basic…

特别注意：在vercel上部署nextjs可能会出现vercel登录、注册失败的情况，这是由于他们不支持qq.com为后缀的邮箱，所以，如果你在部署遇到了问题：

检查自己的github/gitlab邮箱是否为qq.com结尾（也许其他国内的邮箱也不支持）；
将github/gitlab的主邮箱改为别的再登录vercel；
如果步骤2 无效，有可能是你的账号被屏蔽了，最好的办法是注册一个Gmail和新的github账号（比如我）。

另外，注册Gmail需要将自己的浏览器语言改为英文，否则接收不到手机验证码。

约定大于配置

nextjs让我觉得非常有意思的事情是：他减少了很多配置的环节，而是采用了和开发者的约定协议。

比如下面详解的不需要额外配置路由，怎么实现CSS全局设置和模块化设置，怎么让页面“自然地”定义预渲染模式等等，都是告诉我们你在那儿！那儿！写代码就行，我们帮你实现那些琐碎的。

这一点让我觉得很轻松。

你需要知道我：pages —— 消失的路由

你问我爱你有多深，页面代表了我的❤。

在 Next.js 中，规定将页面（即导出的react组件）存放在 pages 目录下；nextjs会自动将页面的文件名作为路由进行对应。

图片里有一个[id].tsx文件是属于动态路由，我们可以通过 posts/1、posts/2 等类似的路径进行访问到。

你需要知道我：在JS文件导入CSS样式表

Next.js 允许你在 JavaScript 文件中导入（import） CSS 文件。

nextjs支持目前所有的css-in-js的解决方案，他对于全局样式和模块样式有自己的看法，按照他的要求在对应的文件引用就行

全局样式 需要将文件import 入 pages/_app.js（如不存在，自行创建）中;
CSS模块样式 需要将文件名约定为.module.css，如果你有一个组件components/demo.js，就需要设置一个components/demo.module.css才可以将他们关联起来。

你需要知道我：预渲染 —— “随心所欲的预渲染模式”

nextjs有三种渲染模式：客户端渲染、SSG、SSR，虽然说这三种渲染模式并不新颖（都是老概念了），但nextjs在预渲染方面仍给出了更好地实现方式（写法上的优势）。

客户端渲染 ◤动态内容◢

客户端渲染简单来说就是用js来构建html，这一点在vue和react中可谓用的顺风顺水。

预渲染

预渲染和服务端渲染这俩词是这几年前端的一大热点，我在知乎上看到了一个非常巧妙的解释来区分它们：

用户请求前的服务器渲染即为「预渲染」。

用户请求后的服务器渲染即为「服务端渲染」。

接下来我们说一下nextjs的预渲染模式：

nextjs为我们提供了两种模式的预渲染：SSG、SSR，这俩的区别在于：什么时候创建html；
其次nextjs预渲染的好用之处在于：不仅写法超级简便，而且支持每个页面自定义预渲染模式！

特别地，如果你当前加载的页面中有Link（nextjs封装的组件）到其他的页面，nextjs会预先在后台帮你加载Link页面，这样就可以无缝切换到下一个页面啦！

预渲染之 SSG 静态生成（Static Generation）◤动态内容静态化◢

静态生成：当你build你的nextjs应用时，这个html内容就生成了，接下用户请求该页面都是返回的这个早已生成好的html内容。

在nextjs中，如果页面不涉及到数据获取◤静态内容◢就会默认采取静态生成的预渲染模式，如果你想在此种模式中获取数据也是可实现的：

在页面中导出一个同步函数getStaticProps（此方法只会在服务器build的时候触发），再将数据data通过对象{props: data}导出；
1 导出的对象，就会在组件Home中的参数props对象中获取到。

// Home组件可以通过props获取到getStaticProps导出的数据，此方法只会在服务器build的时候触发
export default function Home(props) { ... }

export async function getStaticProps() {
  // 通过文件系统、API、数据库等获取数据
  const data = ...

  // 将数据导出到以下对象的props key下，数据会通过props传入Hone组件
  return {
    props: ...
  }
}

预渲染之 SSR 服务端渲染（Server Side Rendering）◤用户相关动态内容静态化◢

服务端渲染：用户请求后在生成对应的HTML内容。

服务端渲染和写法和静态生成的写法类似，只是换了导出的参数，需要使用getServerSideProps（每个用户请求都会触发此方法）：

另外，在getServerSideProps函数内，我们可以获取到context参数，我们可以通过context.req、context.res获取到请求和响应。

function Page({ data }) {
  // 页面通过对象获取到数据
}

// 每个用户请求都会触发此事件
export async function getServerSideProps() {
  // 此处示例是通过api获取数据
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // 将数据通过对象传给页面
  return { props: { data } }
}

export default Page

如何选择渲染模式

上面我们介绍了客户端渲染、静态渲染和服务端渲染，你看明白了吗？下面我对以上渲染做一个总结哦~

你需要知道我：支持typescript

如果你想启动对于typescript的支持，只需要在根据目录新建 tsconfig.json 文件，安装 typescript @types/react @types/node 后重启应用。

总体优点

此处参考文章：juejin.cn/post/688299…

预渲染操作简单，使用非常给力。
上手极快，你可以在五分钟内起手写一个略为复杂的 React 应用。
只需要在一个特定的目录下新建 JavaScript 文件，就能创建路由；当然你也可以自定义路由。
它能基于 import 自动地拆分你的应用 —— 不必要的代码不会被加载。
获取数据极其简单。
你可以配置你需要的任何东西 —— 从页面初始化和路由，到 Webpack 和 Babel 配置。
在任何支持 Node 的环境都可以部署 NextJS 应用。

好啦，以上就是我的一份简单的学习、使用攻略，是骡子是马，拉出来溜溜吧~

nextjs有点意思

前提