React—Next.js 服務端渲染初體驗

時間 2020-02-21

原文原文鏈接

開始

$ npx create-next-app my-app
$ cd my-app
$ yarn dev

目錄結構

.next
node_modules：依賴包
pages: 頁面
components：組件
public：靜態文件
package.json：更改配置
yarn.lock

約定式路由

介紹

不一樣於React Router，Next.js提供了約定式的路由，全部寫在pages/目錄下的js文件都會被轉化爲html頁面在客戶端呈現。

跳轉方式

標籤跳轉css
- 使用<Link>標籤進行跳轉。新版Next.js規定，在<Link>內需嵌套<a>標籤
```
import Link from 'next/link'
<Link href="/index"><a>跳轉</a></Link>
```
- 注意：地址結尾不須要加.js

API跳轉
使用Router.pushhtml

import Router from 'next/router'
<button onClick={()=>{Router.push('/index')}}></button>

傳參 —— 僅支持query傳參

標籤傳參前端

//傳參頁面
<Link href="/index.js?number=1"><a>傳參</a></Link>
 //也能夠寫成
 //<Link href={{pathname:'/index',query:{number:1}}}>
 //    <a>傳參</a>
 // </Link>
...
//接收頁面
import {withRouter} from 'next/router'
const CPN=({router})=>{
    return ( <div>{router.query.number}</div> )
}

API傳參node

Router.push({
   pathname:'/index',
   query:{
       number: 1
   }
})

6個鉤子

routeChangeStart — 路由變化前
routeChangeComplete — 路由變化後
beforeHistoryChange — 路由變化前
routeChangeError — 路由變化前
hashChangeStart — 路由變化前
hashChangeComplete — 路由變化前

語法ios

Router.events.on('routeChangeStart',()=>{
   doSomething...
})

AJAX in Next.js

全部遠端獲取的數據都要放在getInitialProps裏json

const Cpn.getInitialProps = ()=>{
   const promise = new Promise((resolve)=>{
       axios(url,(res)=>{
           console.log(res.data.xxx)
           resolve(res.data.xxx)
       })
   })
   return promise
}

這樣操做後，xxx就會成爲Cpn的參數對象上的屬性了axios
```
const Cpn = ({xxx})=>{
   return <div>{xxx}</div>
}
```
style JSX —— 頁面內樣式
- Next.js 默認不支持import引入css文件
```
return ( 
   <div></div> 
   <style jsx>
       {`
           div { width: 20px; height: 20px;}
       `}
   </style>
)
```
- 注意：用 {} 和 ` 包起來

我就想用import，咋辦？

能夠

$ yarn add @zeit/next-css

//next.config.js
const withCSS = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCSS({})

自定義Head —— 優化SEO

import Head from 'next/head'
function Header()=>(
    <div>
        <Head>
            <title>React，前端，JavaScript</title>
            <meta name="xxx" />
        </Head>
        <div>首頁<div>
    </div>
)
export default Header