Next.js

2020-05-25

react

Word count: 1.2k | Reading time≈ 5 min

next.js简介
创建next.js应用程序
1. 项目结构
page的使用
component的使用
路由相关
getInitialProps数据获取
CSS编写

next中文文档

next.js简介

Next.js 是一个轻量级的 React 服务端渲染应用框架。

完善React项目架构，搭建轻松。比如：Webpack配置，服务器启动，路由配置，缓存能力，这些在它内部已经完善的为我们搭建完成了。
自带数据同步策略，解决服务端渲染最大难点。把服务端渲染好的数据，拿到客户端重用，这个在没有框架的时候，是非常复杂和困难的。有了Next.js，它为我们提供了非常好的解决方法，让我们轻松的就可以实现这些步骤。
丰富的插件帮开发人员增加各种功能。每个项目的需求都是不一样的，包罗万象。无所不有，它为我们提供了插件机制，让我们可以在使用的时候按需使用。你也可以自己写一个插件，让别人来使用。
灵活的配置，让开发变的更简单。它提供很多灵活的配置项，可以根据项目要求的不同快速灵活的进行配置。

创建next.js应用程序

// 1.安装next的项目的脚手架工具 create-next-app
npm install -g create-next-app

// 2.创建next项目
npx create-next-app xxx

项目结构

xxx
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public      // 公共静态文件存放地
├── components     // 组件存放地
└── page    // 页面存放地，自动生成路由渲染在服务器

page的使用

需要新添加路由则直接在page文件夹下创建新文件
eg：

1
2
3

export default function Index(){
    return (<h1>hello world</h1>)
}

打开http://localhost:3000/Index即可访问到相关内容

component的使用

以创建一个item组件为例

export default ({children})=>{
     <button>{children}</button>
}
// {children} => props.children 也可以在里面直接写props 获取的时候 props.children.xx

在page文件夹下的页面中引入
1
import Item from '../components/item'
使用组件
1
<Item>按钮组件 / {xx}</Item>

路由相关

页面跳转一般有两种形式，第一种是利用标签,第二种是用js编程的方式进行跳转，也就是利用Router组件。

标签式导航

在主页面和可跳转页面都引入link

// home-page
import Link from 'next/link'
export default Home=()=>{
    <div>
        <h1>首页</h1>
        <Link href='/pageA'><a>A页面</a></Link>
        {/*  
            带参数传递
            <Link href='/pageA?id=123'><a>A页面</a></Link> 
            <Link href={{pathname:'/pageA',query:{id:'123'}}}><a>A页面</a></Link> 
        */}
        <Link href='/pageB'><a>B页面</a></Link>
    </div>
}
// ----------
// pageA
import Link from 'next/link'
export default ({router})=>{
    <div>
        <h1>page A</h1>
        {/* 
            query接收参数
            <span>{router.query.id}</span>
        */}
        <Link href='/'><a>返回首页</a></Link>
    </div>
}
// -----------
// pageB
import Link from 'next/link'
export default ()=>{
    <div>
        <h1>page B</h1>
        <Link href='/'><a>返回首页</a></Link>
    </div>
}

Router模块进行跳转

import Router from 'next/router'
const Home = ()=>{

function gotoB(){
    Router.push('/pageB')
    /* 
    带参数传递

    Router.push('/pageB?id=123')   

    Router.push({
        pathname: '/pageB',
        query: {
            id: '123'
        }
    })
    */
}

return (
    ...
    <div>
        <button onClick={()=>{Router.push('pageA')}}>A页面</button>
        <button onClick={gotoB}>B页面</button>
    </div>
    ...
    )
}

钩子函数

routeChangeStart路由发生变化时

routerChangeComplete路由结束变化时

beforeHistoryChange浏览器history触发前

routeChangeError路由跳转发生错误时

hashChangeStart hash开始跳转时

hashChangeComplete hash完成跳转时

getInitialProps数据获取

配合axios

安装引入axios

yarn add axios

// 在所需的页面引入axios
import axios from 'axios'
 
const Home = ({router,list})=>{
    return (
        <>
            <div>{list}</div>
        </>
    )
}

/*
 通过getInitialProps获取数据
 然后页面通过props.list获取数据，并进行显示
*/
Home.getInitialProps = async () => {

  const res = await axios('http://rap2.taobao.org:38080/app/mock/250724/get/data').then((res) => {
    return res.data
  })
  //返回值只能是resolve对象
  return res
}
export default withRouter(Home)

CSS编写

使用style jsx语法

// 在return内部编写
<style jsx>
{`
    div{ color:red }
`}
</style>

引入CSS文件

// 安装配置相应内容
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({})

重启项目之后就可以进行使用

1 2	// 在所需页面引入样式文件 import '../public/test.css'