上篇入门了 next 的路由系统，今天我们继续聊 next 这个框架。

主要聊三个话题：CSS 组件样式问题/数据请求/ SEO 信息配置

CSS 样式导入

首先，我们来看一下全局样式的导入。

在项目目录下新建一个 styles.css 的文件，内容很简单，给 body 设置一个背景色。

//styles.css
body{
    background:lightblue;
}

接着，在 pages 文件夹下新建一个 _app.js 文件，内容如下：

//_app.js
import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

重新 npm run dev 之后，所有页面文件都是 lightblue 颜色了。

再看一个组件内部样式的使用。

在 index.js 中我们需要给 h3 标签设置字体颜色为 red。

在这个组件内，我们使用 css-in-js 理念。

//index.js
function Home(props){
    return (
        <div>
            <Head>
                <title>index page</title>
            </Head>
            <h3 className="h3">hello world</h3>
            <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.js
import React from "react"
import Head from "next/head"
import Axios from "axios"function Home(props){
    console.log(props)
    return (
        <div>
            <Head>
                <title>index page</title>
            </Head>
            <h3 className="h3">hello world</h3>
            <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].js
import React from "react"
import Head from "next/head"
function Ha(props){
    console.log(props)
    return (
        <div>
                   <h3>hello haha</h3>
        </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.js
function Home(props){
    console.log(props)
    return (
        <div>
            <Head>
                <title>index page</title>
            </Head>
            <h3 className="h3">hello world</h3>
            <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.js
import React from "react"
import Head from "next/head"
import Axios from "axios"
function Home(props){
    console.log(props)
    return (
        <div>
            <Head>
                <title>index page</title>
                <meta charSet="UTF-8"> // 注意这里的charSet大写，不然React jsx语法 会报错         <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="Next.js | React.js">
                 <meta name="description" content="这是一个跟next.js服务端相关的页面">
            </Head>
            <h3 className="h3">hello world</h3>
            <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;

最后，运行之后在网页就可以看到写入的 meta title 等内容，这样我们就便于网站 seo 了。