Next.js 是一个非常好用的 React 同构框架，然而难免会遇到一些 bug。本文就是 Next.js 遇到的一些常见 bug 以及解决方案的总结，希望能为大家提供一些帮助。
1. 关于 SSR 时的 CSS 样式加载问题
在使用 Next.js 进行 SSR 时，会发现其中一些问题与 CSS 样式的加载有关。主要表现有三点：
- SSR 后页面样式不一致
- SSR 后页面样式未加载
- 构建时 sass 和 less 样式不被导入
这些问题都是 SSR 时的样式加载机制引起的。
第一种解决方案：CSS Modules
CSS Modules 可以在多个组件中使用相同的类名，但不会造成命名冲突。这样的话，CSS Modules 可以允许您在不同的CSS 资产之间使用相同的类名。在每个文件中也可以使用相同的类名来保证组件之间的一致和重复性。
/* 在scss文件中使用类名greeting ，样式属性是color:red */
.greeting {
color: red;
}-- -------------------- ---- -------
-- -----------------------------
------ ------ ---- ------------------------------
-------- ---------- -
------ -
---- ----------------------------
------------ -------------
------
--
-
------ ------- ---------
在上面的代码中，我们通过 import styles from "../styles/index.module.scss"; 先导入样式模块，再通过 className={styles.greeting} 的方式来调用样式。 这样，每个组件都有一个独立的命名空间，组件之间的样式不会冲突。
第二种解决方案：styled-jsx
Next.js 1.4 中引入了一种称为 "styled-jsx" 的内置 CSS 方案，它是一种CSS-in-JS 方法，它允许开发者在组件中使用 CSS 模块化，并且不同于其他的 CSS-in-JS 库的机制，它只在需要的时候才会为每个组件创建样式标记，并自动为您处理 CSS 作用域和作用域的优先级。
例如，在 Next.js 应用程序中，您可以使用内置的样式作为 Linke 组件：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -- -- -
-----
----- ---------
-----------
-------
----- --------------
------------
-------
------ ------
- -
------ ----
-
------- -
------ ------
-
----------
------
-第三种解决方案：@zeit/next-sass 和 @zeit/next-less
install 依赖：
npm install @zeit/next-sass node-sass
修改 next.config.js 配置文件，在里面配置 @zeit/next-sass 插件：
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass() 使用时，只需要在 pages 目录或组件的同级目录下建一个同名的 scss（或less）文件，即可使用其中的样式。如下面的示例代码：
-- -------------------- ---- -------
------ ------ ---- ------------------------------
-------- ---------- -
------ -
---- ----------------------------
------------ -------------
------
--
-
------ ------- ---------
2. 关于 pageContext 的问题
在使用 Next.js 进行 SSR 时，有时候需要在服务器端获取一些信息。Next.js 官方文档提供了一种通用的方法，即通过 pageContext 给组件传递数据。
例如，需要给组件传递一个 API URL，可以这么做：
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- ------- --------------- -
------ ----- ---------------------- -
------ -
------- -------------------
-
-
-------- -
------ ------------------------------
-
-
------ ------- --------上面代码中，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cc6ad95b1f8cacd445fef