这是我参与「第五届青训营 」笔记创作活动的第11天。
Next.js：React 开发框架
React 开发框架,
直观的、 基于页面 的路由系统（并支持动态路由）
预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
自动代码拆分，提升页面加载速度
具有经过优化的预取功能的 客户端路由
内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库
开发环境支持 快速刷新
利用 Serverless Functions 及 API 路由 构建 API 功能
完全可扩展
路由-页面导航
在nextjs里面，每一个页面都是一个导出的react组件，路由基于这个组件的文件目录，一个新的页面产生应该有下面的函数：
export default function FirstPost() {
return <h1>First Post</h1>
}
利用link来实现页面跳转，我们需要先导入
import Link from 'next/link'
然后使用link标签包裹a标签实现跳转，注意里面的url可以用我们本地文件的url
Read <Link href="/posts/first-post"><a>this page!</a></Link>
注意这样保证一整个APP的完整性，如果用a的话，每个页面是独立的，独立的css，js，而用了link，切换的时候css不会换，这里举了一个例子，用开发者工具改变背景颜色，然后用link切换背景不会改变。同时他强调每个页面都是独立的，
资源，元数据和css
资源一般都放在public文件下面，元数据需要引入
import Head from 'next/head'
使用要用Head标签，首字母大写，Next.js内置了对styled-jsx的支持，但你也可以使用其他流行的CSS-in-JS库，如styled-components或 emotion。
Layout组件一般用来作为全页面通用组件
return <div>{children}</div>
}
添加css，在组件目录下创建一个名为 layout.module.css 的文件，内容写一点css作为通用组件格式 ，css的名字一定要注意格式规范，上面的代码完善一下：
import styles from './layout.module.css'
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>
}
