We started with next’s routing system in the last post, and today we’ll continue with the next framework.

Three main topics: CSS component style issues/data requests/SEO information configuration

CSS style import

First, let’s look at importing global styles.

Create a new styles.css file in your project directory and simply give the body a background color.

//styles.css
body{
    background:lightblue;
}
Copy the code

Next, create a new _app.js file in the Pages folder with the following contents:

//_app.js import '.. /styles.css' export default function MyApp({ Component, pageProps }) { return <Component {... pageProps} /> }Copy the code

After re-npm run dev, all page files are lightblue.

Take another look at the use of styling within a component.

In index.js we need to set the font color to red for the h3 tag.

Within this component, we use the CSS-in-JS concept.

//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>
    )
}
Copy the code

Through the code above we can see that under div CSS – in – js is written to a style tags, and add JSX attributes, and then write within {} string template ` `, within this template into normal CSS code.

This style affects only the style of the element within the current component.

Data request

Next provides four ways to write data:

  • getInitialProps()

  • getStaticProps()

  • getStaticPaths()

  • getServerSideProps()

The getInitialProps method is not recommended, but has not yet been deprecated.

GetStaticProps () This method is officially translated as static generation. My personal understanding is to pre-compile components into HTML files, and then respond to the entire HTML file to the client for the purpose of pre-rendering.

For the use of this method, see 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;
Copy the code

Usage:

Export Async function getStaticProps(context){}

It must return an object internally, and this object has the structure {props:{}}. The props printed inside the function component is the object returned, and ajax data requests can also be made in this function.

GetStaticPaths () This method is also statically generated.

//[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:,23,34 [12]}}}Copy the code

Note:

  • Use in dynamic routing component [pid].js

  • Must be returned within {paths: [{params: {pid: “1”}}, {params: {pid: “2”}}], fallback: false | | true} this form, when performing this function will be according to the paths to generate the corresponding static file 1. HTML, 2.html

  • This must be used with getStaticProps({params}) to get these corresponding params values

GetServerSideProps () this method is the server render method.

Unlike the previous methods, getStaticProps and getStaticPaths are built in one go and will not be executed once NPM runs build.

GetServerSideProps is a server-side render that, even if packaged, is re-executed as soon as the page is refreshed. Therefore, the performance experience is poor, and static generation is recommended.

//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;
Copy the code

There is not much difference in their use.

SEO optimization

For SEO, the head tag is inevitable, and next provides us with the ability to customize the head, we can add title meta and so on.

//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 "> <meta name="viewport" content="width=device-width ", Initial - scale = 1.0 "> < meta name =" keywords "content =" Next. Js | React. Js "> < meta name =" description" </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;Copy the code

Finally, after running, you can see the meta title and other content written in the web page, so that we can facilitate website SEO.