nextjs的入门

环境准备

// 全局安装next
npm install -g create-next-app

// 创建项目
create-next-app next_demo

// 启动项目
npm run dev

// 打包
yarn build

// 运行打包后的程序
yarn start

入门须知

Next.js 遵从『协定优于配置』（convention over configuration）的设计原则，根据『协定』，在 pages 中每个文件对应一个网页文件，文件名对应的就是网页的路径名，比如 pages/home.js 文件对应的就是 /home 路径的页面，当然 pages/index.js 比较特殊，对应的是默认根路径 / 的页面。

创建页面

在pages下新建about.js文件

// 注意大小括号之分
const About = () => (
  <div>
    <p>我是about</p>
  </div>
)
export default About;

页面跳转

使用LInk组件，例如从index跳转到到about

// index.js

import Link from 'next/link'

<Link href="/about">
  <a>去about页面</a>
</Link>

坑

● 不能用local
● 样式用scss, 因为less不再支持

样式问题-scss

支持使用scss
首先安装npm install sass，然后做下配置

// file(next.config.js)
const path = require('path')
module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

页面中使用，例如heaer

// scss
.header_wrap{
  padding: 20rpx;
  background: #eee;
  padding: 20px;
  .nav{
    margin: 10px;
  }
}

// html
import style from './header.module.scss'

<div className={style.header_wrap}>
  <Link href="/about">
    <a className={style.nav} title="woshi">去about页面</a>
  </Link>
</div>

路由

Nextjs官方推荐了两种跳转方式，一种是Link组件包裹，一种使用Router，

router

Router.push(‘url’)

import React from 'react'     
import Router from 'next/router'

export default () => {
    return(
        <>
            <button onClick={()=>Router.push('/demo')} >送我去demo页</button>
            <div>这里是主页</div>
        </>
    )
}

路由传参

注意！注意！Nextjs不能使用params传参数!只能通过query!

Router.push('url?id=1')
等价
Router.push({
    pathname:'url',
    query:{id:1}
})

路由取参

服务端渲染时没有window对象的，自然不能通过传统途径获取url参数，这里’next/router’里提供了一个withRouter对象，用它包裹组件后，组件会多出router的参数，通过router就能获取query参数了

import React from 'react'
import Router,{ withRouter } from 'next/router'

const Demo = (props) => {
    return(
        <>
            <button onClick={()=>Router.push('/')} >送我去主页</button>
            <div>这里是demo页</div>
        		// 路由取参
            <div>{props.router.query.id}</div>
        </>
    )
}
export default withRouter(Demo);

随笔

● 刷新时，http的信息在服务端打印
● 跳转后，http的信息在客户端打印

冷知识讲解

getInitialProps

1. 执行时机。页面初始加载时getInitialProps只会在服务端加载。只有当路由跳转（Link组件跳转或API方法跳转），客户端才会执行getInitialProps。
2. 确保getInitialProps返回的是普通对象。当服务渲染时，getInitialProps将会把数据序列化（类似JSON.stringify），想Map,Set等类型无法序列化会报错。
3. 函数只能用于pages目录下的页面组件，不能用在非pages目录下的组件。
4. 函数位置。对于函数组件getInitialProps需要定义在函数组件外面（示例就是如此），这样才能把数据传入函数组件参数。而对于类组件（class组件），函数必须声明静态方法，且放在类组件里面。参考官网示例：

 import React from 'react'
   
   export default class extends React.Component {
     static async getInitialProps({ req }) {
       const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
       return { userAgent }
     }
   
     render() {
       return (
         <div>
           Hello World {this.props.userAgent}
         </div>
       )
     }
   }

同时，getInitialProps函数本身还提供了一些参数方便我们直接获取路由、请求等相关信息。
● pathname - URL 的 path 部分
● query - URL 的 query 部分，并被解析成对象
● asPath - 显示在浏览器中的实际路径（包含查询部分），为String类型
● req - HTTP 请求对象 (只有服务器端有)
● res - HTTP 返回对象 (只有服务器端有)
● jsonPageRes - 获取数据响应对象 (只有客户端有)
● err - 渲染过程中的任何错误

好了今天先写到这