00. 把react JS, SPA 转换为 Next JS 系列教程

前言：

把一个由React 实现的后台管理系统模版，转换为Next JS。

项目更新规划

1. 新建Next 项目

2. 引入第三方依赖和样式

3. 升级其中一个页面的主要内容

4. 升级导航栏

详细实现步骤 之 “1. 新建Next 项目”

初步试水

在拿到这个React 系统初期，用Next 教程的新建项目教程，创建了一个Next App.然后把React项目里的Component文件夹， pages文件夹，service文件夹全部复制过去。

调试了一两天，苦恼不堪，感觉是一团乱麻，不能成功启动这个Next App.

走入正轨

衣带渐宽终不悔，功夫不负有心人。我在一篇"Next JS 入坑系列教程"中，找到了有经验的同路人。在像大家阐明我面临的问题后，听到有人这样评价我之前的做法是要“一口吃个胖子”。更可贵的是，有小伙伴提到了 Next official example 官方实例。前者让我知道我要改变战略，要分而治之，模块化逐步迁移；后者让我找到了适用的Next JS官方实例，可以基于该应用进行改造。

因为React 模版适用 antd 实现，所以我选择了antd-less 。

详细实现步骤 之 “2. 引入第三方依赖和样式”

1. 在Next JS "_app.js" 中，引入 React 项目中使用的第三方依赖和样式文件

在Next JS "_app.js" 中引入全局样式和依赖

Next JS 版本号 > 10 项目中，如何正确使用SASS, Css 

如上图所示，在官方实例：antd + less项目中 直接加入这些 CSS发现编译失败了。又找到官方实例：with next sass。里面讲到：

This example demonstrates how to use Next.js' built-in Global Sass/Scss imports and Component-Level Sass/Scss modules support.

该实例展示了如何使用Next.js 内置对 全局 Sass/Scss引用的支持。

即最新的Next JS 是默认支持Sass/Scss的，无需额外配置。

但经过一番周折，始终不能成功引入。开始怀疑是不是真的内置支持，同时也找到了一个 Next JS + Sass + antd 的github实例。

在此特别感谢，"Next JS 入坑系列教程" 中的小伙伴，让我有机会把问题描述出来，里面也有才思敏捷的热心小伙伴，基于官方实例：antd + less 安装了CSS 插件后，发现才可以正确引入 CSS样式文件。于是我把Next JS + Sass + antd 的github实例 中 “next.config.js”引入到新建的Next 项目，就可以成功引入CSS，Sass 等文件了。

总结：

之后分析得出结论：虽然最新的Next JS 是默认支持Sass/Scss的，无需额外配置。但因为我创建的Next JS 项目是基于官方实例：antd + less ，里面已经有“.babelrc”配置文件用于对.less文件的支持，于是Next JS 默认支持CSS, Sass/Scss等功能被覆盖掉，可见下图WARING 信息

内置 CSS支持被禁止

流程总结：

1. 使用官方实例 antd + less

2. 配置插件以变支持 CSS, Sass/Scss样式文件，配置文件可参考GitHub项目next-antd-sass