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

开始

$ 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页面在客户端呈现。

跳转方式

1. 标签跳转

   • 使用标签进行跳转。新版Next.js规定，在内需嵌套标签

   import Link from 'next/link'
   跳转

   • 注意：地址结尾不需要加.js

2. API跳转
   使用Router.push

   import Router from 'next/router'
   {Router.push('/index')}}>

传参 —— 仅支持query传参

• 标签传参

  //传参页面
  传参
   //也可以写成
   //
   //    传参
   // 
  ...
  //接收页面
  import {withRouter} from 'next/router'
  const CPN=({router})=>{
      return ( 
  {router.query.number}
   )
  }

• API传参

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

6个钩子

1. routeChangeStart — 路由变化前
2. routeChangeComplete — 路由变化后
3. beforeHistoryChange — 路由变化前
4. routeChangeError — 路由变化前
5. hashChangeStart — 路由变化前
6. hashChangeComplete — 路由变化前

• 语法

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

AJAX in Next.js

• 所有远端获取的数据都要放在getInitialProps里

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

• 这样操作后，xxx就会成为Cpn的参数对象上的属性了

  const Cpn = ({xxx})=>{
     return 
  {xxx}
  }

  style JSX —— 页面内样式

  • Next.js 默认不支持import引入css文件

  return ( 
     
   
     
  )

  • 注意：用 {} 和 ` 包起来

我就想用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()=>(
    

        
            
            
        
        
首页

    
)
export default Header