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

React—Next.js 服务端渲染初体验

开始

目录结构

约定式路由

介绍

跳转方式

传参 —— 仅支持query传参

6个钩子

AJAX in Next.js

style JSX —— 页面内样式

我就想用import，咋办？

自定义Head —— 优化SEO