三篇短文让你学会 NextJS（二）
共 4252字，需浏览 9分钟
·
2020-12-10 15:28
嗨，我是你稳定更新、持续输出的勾崽。
上篇入门了 next 的路由系统，今天我们继续聊 next 这个框架。
主要聊三个话题：CSS 组件样式问题/数据请求/ SEO 信息配置
CSS 样式导入
首先，我们来看一下全局样式的导入。
在项目目录下新建一个 styles.css 的文件，内容很简单，给 body 设置一个背景色。
//styles.cssbody{background:lightblue;}
接着，在 pages 文件夹下新建一个 _app.js 文件，内容如下：
//_app.jsimport '../styles.css'export default function MyApp({ Component, pageProps }) {return <Component {...pageProps} />}
重新 npm run dev 之后，所有页面文件都是 lightblue 颜色了。
再看一个组件内部样式的使用。
在 index.js 中我们需要给 h3 标签设置字体颜色为 red。
在这个组件内，我们使用 css-in-js 理念。
//index.jsfunction Home(props){return (<div><Head><title>index pagetitle>Head><h3 className="h3">hello worldh3><img src="/01.jpg">img><style jsx>{`.h3{color:skyblue;}`}style>div>)}
通过上面代码我们可以看到，css-in-js 就是在 div 下写入一个 style 标签，并且加上 jsx 属性，然后在 {} 内写入字符串模板 ``，在这个模板内写入正常的 css 代码就可以了。
这个样式只能影响到当前组件内的元素的样式。
数据请求
Next 提供了四种写入数据的方式：
getInitialProps()
getStaticProps()
getStaticPaths()
getServerSideProps()
getInitialProps 这个方法不推荐使用，只是目前还没有被舍弃掉。
getStaticProps() 这个方法官方翻译为静态生成。我个人的理解是把组件提前编译成 html 文件，然后把整个 html 文件响应到客户端，从而达到预渲染的目的。
对于这个方法的使用，先看 demo：
//index.jsimport React from "react"import Head from "next/head"import Axios from "axios"function Home(props){console.log(props)return (<div><Head><title>index pagetitle>Head><h3 className="h3">hello worldh3><img src="/01.jpg">img><style jsx>{`.h3{color:skyblue;}`}style>div>)}export async function getStaticProps(context) {console.log("------")return {props: {name:"lisi"}, // will be passed to the page component as props}}export default Home;
使用方法：
在函数组件下面 export async function getStaticProps(context){}
它内部必须返回一个对象，并且这个对象的结构是 {props:{}} 。在函数组件内部打印的 props 就是返回的这个对象，同时可以在这个函数进行 ajax 数据请求。
getStaticPaths() 这个方法也是静态生成。
//[pid].jsimport React from "react"import Head from "next/head"function Ha(props){console.log(props)return (<div><h3>hello hahah3>div>)}export async function getStaticPaths() {return {paths: [{params:{ pid:"1" }},{params:{pid:"2"}} // See the "paths" section below],fallback: false // See the "fallback" section below};}export async function getStaticProps({params}){console.log("------",params)console.log("----","hello")return {props:{data:[12,23,34]}}}
注意：
使用在动态路由组件内 [pid].js
内部必须返回 {paths:[{params:{pid:"1"}},{params:{pid:"2"}}],fallback:false||true} 这种形式，在执行这个函数的时候会根据 paths 生成对应的静态文件 1.html，2.html
必须配合 getStaticProps({params}) 使用，可以获取这些对应的 params 值
getServerSideProps() 这个方法是服务端渲染的方法。
它跟上面几个方法不同的是，getStaticProps 和 getStaticPaths 都是在构建的时候一次性完成，一旦 npm run build 之后，就不会再执行这两个函数了。
而 getServerSideProps 是服务端渲染，即便打包了，只要刷新页面就会重新执行这个函数。所以性能上体验较差，更推荐使用静态生成。
//index.jsfunction Home(props){console.log(props)return (<div><Head><title>index pagetitle>Head><h3 className="h3">hello worldh3><img src="/01.jpg">img><style jsx>{`.h3{color:skyblue;}`}style>div>)}export async function getServerSideProps(context) {console.log("------")return {props: {name:"lisi"}, // will be passed to the page component as props}}export default Home;
他们在使用上差距不大。
SEO优化
对于 SEO 免不了需要 head 标签，而 next 给我们提供了自定义 head 的功能，我们可以添加 title meta 等。
//index.jsimport React from "react"import Head from "next/head"import Axios from "axios"function Home(props){console.log(props)return (index page "UTF-8"> // 注意这里的charSet大写，不然React jsx语法 会报错"description" content="这是一个跟next.js服务端相关的页面">"h3"
>hello world"/01.jpg">)}export async function getServerSideProps(context) {console.log("------")return {props: {name:"lisi"}, // will be passed to the page component as props}}export default Home;
最后，运行之后在网页就可以看到写入的 meta title 等内容，这样我们就便于网站 seo 了。
推荐阅读：
前端人因为 Vue3 的 Ref-sugar 提案打起来了！
点点“赞”和“在看”，保护头发，减少bug。