next.js-一一网

Next.js

什么是Next.js

是一个轻量级SSR框架,作用是服务器渲染

优点

搭建轻松

自带数据同步ssr

丰富的插件，自己形成生态

配置灵活

系统要求

Node.js 10.13 或更高版本

配置方式

两种

一种是自己手动配置,示例1

一种是通过create-next-app 文件名这个脚手架帮我们生成,首先安装npx 然后，npx create-next-app next-create

示例1
1. 首先     npm init  初始化项目，生成package.json文件
2. 安装依赖 yarn add react react-dom next
3. 在package.json中的scripts里添加命令
    "dev" : "next" ,
    "build" : " next build",
    "start" : "next start"
4. 新建一个pages文件夹，创建一个index.js，使用react语法写一个组件，然后导出
5. npm run dev 或yarn dev就可以看到页面了
注意：如果node版本低于10.13会报错
复制代码

pages

这里面存储的是页面，默认进入的是index.js这个页面

语法于react一样

切换页面直接在浏览器切换后缀名就可以,例如http://localhost:3000/jspang切换到jspang.js

二级目录，http://localhost:3000/aa/jspang指的是pages文件夹下的aa文件夹中的japang

Link

import Link from ‘next/link’

标签式跳转

注意的是，link标签内只能有一个子节点（不过这个子节点里面可以套多个孙节点），否则会报错，官方推荐写a

		import Link from 'next/link'
		export default ()=><Link href="/jspang"><a>跳转到A页面</a></Link>
复制代码

Router

import Router from ‘next/router’或者import {useRouter} from ‘next/router’

命令式跳转

//跳转首页
let index=()=>{Router.push('/')}
复制代码

接收URL传递的参数

假设形参为props

query

props.query拿到一个对象，是问号后的传参

widthRoute

import {widthRoute} from ‘next/widthRoute’

与react一样，是个高阶组件，可以使这个组件为受路由管控组件

路由的生命周期函数

routeChangeStart 即将跳转，但还没有跳转

routeChangeComplete 跳转后

beforeHistoryChange 在history模式下跳转前,执行顺序在routeChangeStart之后,在routeChangeComplete之前

routeChangeError 路由发生错误之后,404时不算错误

hashChangeStart

hashChangeComplete

使用方法
Router.events.on('routeChangeStart',()=>{})
复制代码

数据请求-传递参数

把数据请求的值传递给函数组件，需要一个方法

组件名.getInitialProps=()=>{return 参数}

且组件需要用widthRoute(函数组件)

参数接收使用的是与return出的对应的值,比如说return的名字是list

import {withRouter} from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import Mock from '../Mock'


const QingQiu = (props)=>{
    console.log(props.router,8)
    console.log(props.string,9)
    return (
        <>
        <div>请求页面</div>
        <Link href="/"><a>返回首页</a></Link>
        </>
    )
}

QingQiu.getInitialProps = async ()=>{
    const promise =new Promise((resolve)=>{
            axios.post('/api/news').then(
                (res)=>{
                    resolve(res.data.data)
                }
            )
    })
    console.log(promise,26)
    return await promise
}

export default withRouter(QingQiu)
复制代码

通过style jsx标签添加样式

在Next.js中引入一个CSS样式是不可以用的

如果想用可以这样写

<style jsx>{``}</style>

使用了style JSX后，next.js会自动给标签添加一个随机类名，防止css的全局污染,可以在页面中看到

function Style(){
    const color='blue';
    return (
        <>
        <div>样式</div>
        <style jsx>
            {`
            div{color:${color};}
            `}
        </style>
        </>
    )
}
export default Style;
复制代码

懒加载

第三方模块懒加载

在组件内部的函数内导入，当触发了函数才开始加载

当前为点击按钮才开始加载

import React, {useState} from 'react'
//不在这里导入
function Time(){
    const [nowTime,setTime] = useState(Date.now())
    const changeTime= async ()=>{ //把方法变成异步模式
        const moment = await import('moment') //等待moment加载完成
        setTime(moment.default(Date.now()).format()) //注意使用defalut
    }
    return (
        <>
            <div>显示时间为:{nowTime}</div>
            <div><button onClick={changeTime}>改变时间格式</button></div>
        </>
    )
}
export default Time
复制代码

组件的懒加载

需要使用dynamic

在父组件中导入import dynamic from 'next/dynamic'

然后在父组件中导入子组件的时候这样写danamic(导入组件)

会在jsx使用到导入组件的时候才加载

import dynamic from 'next/dynamic'//导入懒加载方法
const One = dynamic(import('../components/one'))//导入UI模块
function Time(){
    return (
        <>
            <One/>
            //这里使用了组件，所以加载
        </>
    )
}
export default Time
复制代码

自定义head标签

好处是有利于SEO

编写head

先在pages里面创建一个js，然后在使用的地方导入，在双闭合标签中添加要定义的内容，如title

其实自定义有点多余，因为next给我们提供好了

//定义head.js
function Header(){ 
    return (<div>JSPang.com</div>)
}
export default Header

//在父级组件导入
import Head from 'next/head'
function Header(){ 
    return (
        <>
            <Head>
                <title>标题内容</title>
                <meta charSet='utf-8' />
            </Head>
            <div>JSPang.com</div>

        </> 
    )
}
export default Header
复制代码

使用next定义好的head

导入模块 import Head from ‘next/head’

用法同上，只不过这个是导入的是next帮我们封装好的

路由

useRouter

import {useRouter} from ‘next/router’

用法 const router = useRouter();

router里面是一个对象，有一些参数，

作用，查看当前路由信息，还可以实现跳转

名称  值类型  作用
pathname 字符串 页面的路径
query 对象 页面跳转时，query传递过来的字符串，这些不`会在url中显示，且刷新会丢失`,默认为空对象
asPath 字符串 浏览器中现实的页面路径
push 函数 跳转页面(向路由历史记录池子里面添加一条实现跳转)，三个参数（url,as,options）
	push参数含义(
				跳转的地址，
				页面展示的地址(弊端，刷新后会报404)，
				载荷{
					scroll:默认为true代表跳转过后在页面顶部,
					shallow:更新当前页面的路径，无需重新运行getStaticProps，getServerSideProps或getInitialProps。默认为false
				})
	例如：`<button onClick={()=>{router.push('/two','hh',{scroll:false})}}>点击跳转two</button>`
replace 函数 跳转页面(替换路由历史记录池子中的最后一条实现跳转) ,三个参数(url,as,options)
	参数含义与push相同
prefetch 函数 实现路由懒加载，提前获取到页面 ,两个参数 (url,as)
	prefetch参数含义(需要提前获取走缓存的页面地址,装饰器)
beforePopState 函数 
复制代码