React-SSR-Nextjs

文章目录

Nextjs关于Nextjs的介绍Nextjs的优点脚手架构建Nextjs的项目路由配置路由跳转标签式导航标签式导航跳转传参编程式导航编程式导航传参接收传过来的参数 路由钩子事件`routerChangeStart`路由发生变化时`routerChangeComplete`路由结束变化时`beforeHistoryChange`浏览器history触发前`routeChangeError`路由跳转发生错误时 hash路由模式`hashChangeStart`hash跳转开始时执行`hashChangeComplete`hash跳转完成时 组件使用`getInitialProps`使用axios发送请求获取数据 懒加载自定义组件使用dynamic对自定义组件进行组件的懒加载 让nextjs支持csshttps://github.com/zeit/next-plugins安装`@zeit/next-css` 配置按需加载第三方组件库以antd为示例安装和配置`babel-plugin-import` 插件安装在项目根目录建立`.babelrc`文件，进行配置 配置APP入口

Nextjs

关于Nextjs的介绍

Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现React的服务端渲染，从而加快首屏打开速度，也可以作SEO（收索引擎优化了）。在没有Next.js的时候，用React开发需要配置很多繁琐的参数，如Webpack配置，Router配置和服务器端配置等…。如果需要作SEO，要考虑的事情就更多了，怎么样服务端渲染和客户端渲染保持一致就是一件非常麻烦的事情，需要引入很多第三方库。但有了Next.js，这些问题都解决了，使开发人员可以将精力放在业务逻辑上，从繁琐的配置中解放出来

Nextjs的优点

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

脚手架构建Nextjs的项目

create-next-app可以快速的创建Next.js项目；简单来说它就是一个脚手架

有三种方式可以通过create-next-app进行nextjs的项目构建

npx create-next-app my-next-app

不是版本很低的nodejs,都会有npx这个模块；

// 在自己的命令行中输入查看版本号 npx -v // 如果没有可以使用npm进行安装 npm install -g npx yarn create next-app my-next-app // 先全局安装create-next-app的脚手架工具 npm install -g create-next-app //使用create-next-app 构建 create-next-app my-next-app

全部安装后可以看到命令行的命令提示;cd到项目的目录中然后输入命令

yarn dev //默认端口是locahost:3000; 如果端口号被占用可自行修改端口号

修改端口号

进入到项目根目录下的package.json进去之后主要看script中的命令修改dev和start端口都是在其后面加-p 端口即可 { "scripts": { "dev": "next dev -p 8999", "build": "next build", "start": "next start -p 8999" }, }

路由配置

nextjs脚手架生成的项目中pages文件夹下的文件/文件夹，运行时会被转成路由，

也就是说，当我们想要创建/list路由时，只需要创建一个list.js即可，或者创建文件夹，下建立index.js，nextjs会帮我们自动编译成路由

这个和nuxtjs相同，为我们节省了路由的配置，只需要关注我们的具体需求即可

路由跳转

标签式导航

使用Link

同路由跳转一样给我们想要跳转的套上Link标签和a标签即可

比如在index.js页面中，

首先我们需要先引入Link

import Link from 'next/link'

这里模拟跳转首页

要跳转其他路由，只需要在href中写对应的路由即可

return ( <div> <Link href="/"> <a>首页</a> </Link> </div> )

注意: 当我们想要在Link标签中嵌套两个跳转时，需要用一个父标签将他们包裹起来如a标签;它不支持兄弟标签并列的情况

<a> <span>1</span> <span>2</span> </a>

如果不包裹就会出现报错，如下

client pings, but there's no entry for page: /_error Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

标签式导航跳转传参

当然也可以直接在跳转路径上的拼接参数即可

<Link href={{pathname:'/',query:{name:'demo',id:1}}}> <a>传参</a> </Link>

编程式导航

使用Router模块进行跳转

引入Router

import Router from 'next/router'

这里为了简单演示，就直接在jsx中写了

<div> <button onClick={()=>{Router.push('/')}}>首页</button> </div>

编程式导航传参

使用,加入pathname和query即可

Router.push({ pathname:'/', query:{ name:'demo', id: 1 } })

接收传过来的参数

withRouter是Next.js框架的高级组件，用来处理路由用的

这里可以使用，拿取路由中的参数

import { withRouter} from 'next/router' import Link from 'next/link' const Demo = ({router})=>{ return ( <> <div>{router.query.name}</div> <Link href="/"><a>返回首页</a></Link> </> ) } export default withRouter(Demo)

路由钩子事件

在监听路由发生变化时，我们需要用Router组件，然后用on方法来进行监听

routerChangeStart路由发生变化时

Router.events.on('routeChangeStart',(...args)=>{ console.log('routeChangeStart->路由开始变化,参数为:',...args) })

routerChangeComplete路由结束变化时

Router.events.on('routeChangeComplete',(...args)=>{ console.log('routeChangeComplete->路由结束变化,参数为:',...args) })

beforeHistoryChange浏览器history触发前

Router.events.on('beforeHistoryChange',(...args)=>{ console.log('beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args) })

routeChangeError路由跳转发生错误时

Router.events.on('routeChangeError',(...args)=>{ console.log('routeChangeError->跳转发生错误,参数为:',...args) })

hash路由模式

还有两种事件，都是针对hash的，所以现在要转变成hash模式。hash模式下的两个事件hashChangeStart和hashChangeComplete

hashChangeStarthash跳转开始时执行

Router.events.on('hashChangeStart',(...args)=>{ console.log('hashChangeStart->hash跳转开始时执行,参数为:',...args) })

hashChangeCompletehash跳转完成时

Router.events.on('hashChangeComplete',(...args)=>{ console.log('hashChangeComplete->hash跳转完成时,参数为:',...args) })

组件使用

当我们想自定义组件的使用的时候，我们可以在components文件夹下创建我们想要的组件

直接新建js文件或者新建文件夹在其下创建文件

使用的时候只需直接引入即可，和在react中使用一样，只不过这里是规范组件的定义规范

getInitialProps

在Next.js框架中提供了getInitialProps静态方法用来获取远端数据，这个是框架的约定，所以你也只能在这个方法里获取远端数据

使用axios发送请求获取数据

从props中解构{router,data}

data即为请求到的数据

import { withRouter} from 'next/router' import Link from 'next/link' import axios from 'axios' const Demo = ({router,data})=>{ return ( <> <div>{router.query.name}{data}</div> </> ) } Demo.getInitialProps = async ()=>{ const promise =new Promise((resolve)=>{ axios('https://').then( (res)=>{ console.log('数据：',res) resolve(res.data.data) } ) }) return await promise } export default withRouter(Demo)

懒加载自定义组件

使用dynamic对自定义组件进行组件的懒加载

引入dynamic import dynamic from 'next/dynamic'

使用

import React, {useState} from 'react' import dynamic from 'next/dynamic' const Demo = dynamic(import('../components/demo')) function DemoCom(){ return ( <div> <Demo/> </div> ) } export default DemoCom;

可以自定义组件就是懒加载的，只有在jsx里用到时，才会被加载进来，如果不使用就不会被加载。

让nextjs支持css

Next.js默认是不支持CSS文件的，它用的是style jsx，

也就是说它是不支持直接用import进行引入css的。

如果引入会报错

https://github.com/zeit/next-plugins

这里有next的插件，有很多可自行查看

安装@zeit/next-css

它的主要功能就是让Next.js可以加载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({})

配置按需加载第三方组件库

以antd为示例

安装 yarn add antd

安装和配置babel-plugin-import 插件

安装

yarn add babel-plugin-import

在项目根目录建立.babelrc文件，进行配置

完成后要重新打包编译才可生效

{ "presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置 "plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS [ "import", { "libraryName":"antd", "style":"css" } ] ] }

配置APP入口

在page目录下，新建一个_app.js文件，然后写入下面的代码。

就可以全局引入antd的样式了

import App from 'next/app' import 'antd/dist/antd.css' export default App