新项目决定用Nextjs，原因是它能“很好地解决SEO的问题”。然而一个尴尬的现实是，团队里没有人特别熟悉这个框架，这既是机会也是挑战，干就完了。
这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
框架的基本介绍
在我看来，Nextjs是一个全能型的框架，它其实包含两部分：客户端和服务端
客户端跑在浏览器端，服务端跑在nextjs程序里（nextjs本质上是起了一个Nodejs服务器）。
这样一个nextjs应用其实可以有三种渲染形式：
- 静态预渲染（static generation）。在构建时生成
- 服务端渲染（serverside rendering），运行时渲染
- 客户端渲染。浏览器端渲染
其中第一种非常强大：
- 支持纯静态的网站
- 支持通过接口获取数据后生成html文件
- 支持动态路由 假设你有一篇文章是通过接口获取的内容，那么可以通过nextjs生成一份静态的html文件，只需要在合适的地方配置好接口调用以及数据的传递，一切交给Nextjs。
再假设你有好几篇文章（10篇），文章的路由为：article/:id。nextjs依然可以帮你生成这些html文件（10份），只需要你配置好相关的接口调用和数据传递即可。
多说一句，我们需要借助的是nextjs的的header部分元数据的装载，页面主体内容我们还是希望做客户端渲染的。
页面
nextjs有一个很重要的概念就是page，我们只需要在项目的pages目录下新建一个目录比如：demo/home.js。nextjs会自动将该页面内容映射到路由：/demo/home
其中有些方法是只能在page里执行的如：
- getStaticProps
- getStaticPaths
- getServerSideProps
前两个是用于构建静态内容（生产静态html文件）的，后一个是用于服务端渲染的。
关于page的详细介绍可查看 Nextjs之page
内置的样式支持
全局样式
新建一个全局样式文件，然后导入到pages/_app.js文件即可
组件级样式
Nextjs支持css-module,只要带*.module.css的文件导入时会被自动解析：
//global.module.css
.error{
color:red;
}
// component
import styles from './global.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
预处理语言（sass、scss）
配置sass编译项：
//next.config.js
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
css in js
这个天然支持就不用说了
const component = () => {
return <div styke={{ color:"red" }}></div>
}
最后
感谢阅读，会继续更新该系列的，谢谢！
