跟文档学习next.js

有点困 發表於 2019-8-16 13:04:00

前言：Next.js 是一个轻量级的 React 服务端渲染应用框架。 
 
Next.js中文点击这里 
Next.js中文站Github点击这里
新建文件夹安装它：
<div class="cnblogs_code">
<pre>npm install --save next react react-dom</pre>
</div>
将下面脚本添加到 package.json 中:
<div class="cnblogs_code">
<pre>{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}</pre>
</div>
这里注意。启动项目服务后，react默认的端口号是3000，而next的入口文件默认是隐藏的，这点后面再说。所以如果你有项目端口已经用3000的端口号，那么可以修改package.json 中的脚本：
<div class="cnblogs_code">
<pre>{
"scripts": {
"dev": "next -p 2019",
"build": "next build",
"start": "next start"
}
}</pre>
</div>
如上，在dev后面添加“-p 端口号”即可；
由于Next.js 只支持React 16，我们使用 React 16 的特性，所以不得不放弃对 React 15 以及以下版本的支持。
Next.js 具有以下几点特性：
<ul>
<li>默认支持服务端渲染</li>
<li>自动根据页面进行代码分割</li>
<li>简洁的客户端路由方案（基于页面</li>
<li>基于 Webpack 的开发环境，支持热模块替换</li>
<li>可以跟 Express 或者其它 Node.js 服务器完美集成</li>
<li>支持 Babel 和 Webpack 的配置项定制</li>
<li>文件系统是主要的 API. 每个.js 文件将变成一个路由，自动处理和渲染。</li>
<li>以pages文件作为服务端的渲染和索引</li>
<li>热加载</li>
<li>静态文件服务. <code>./static/</code> 映射到 <code>/static/</code> (可以创建一个静态项目文件夹在你的项目中，里面放置一些图片和字体等)</li>
</ul>
 继续：新建 <code class="jsx-1052285736 ">./pages/index.js</code> 到你的项目中；
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815163233583-1265370304.png">
 <img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815163333615-693234501.png">
在我们的项目中，肯定不止一个项目的。那么我们就需要在多个页面之间进行跳转，就要借助<code>next/link</code>组件，下面我们新增一个页面game页面并将index页面进行改写；
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815165559296-1673181458.png">
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815165931667-2123920865.png">
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815165656929-1549823489.png">
game页面
 <img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815165626208-522008639.png">
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190815165748222-157685491.png">
Link标签支持任意react组件作为其子元素，不一定要用a标签，只要该子元素能响应onClick事件，Link标签不支持添加style和className等属性，如果要给链接增加样式，需要在子元素上添加；
由于next支持热加载，所以直接保存就可以看到效果哦；
现在已经可以正常跳转了，那么就需要传递参数了，如果需要给路由传参数，则使用<code>query string</code>的形式：
<div class="cnblogs_code">
<pre>static async getInitialProps ({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}

render () {
return (
 <div className="app-box">
 我是next.js页面
 <Link href="/game?title=hello">
 <a>To Game Page</a>
 </Link>
 {this.props.userAgent}
 </div>
)
} </pre>
</div>
<div class="cnblogs_code">
<pre>static async getInitialProps ({ req, query }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent, query }
}
render () {
console.log(this.props.query);
return (
 <div className="game-box">
 我是game页面
 <Link href="/">
 <a>To index Page</a>
 </Link>
 {this.props.query.title}
 </div>
)
}</pre>
</div>
从上面两段代码可以看到：
<ul>
<li>当页面渲染时加载数据，我们使用了一个异步方法getInitialProps。它能异步获取 JS 普通对象，并绑定在props上；</li>
<li>当服务渲染时，<code>getInitialProps</code>将会把数据序列化，就像<code>JSON.stringify</code>。所以确保<code>getInitialProps</code>返回的是一个普通 JS 对象，而不是<code>Date</code>, <code>Map</code> 或 <code>Set</code>类型；</li>
<li>当页面初次加载时，<code>getInitialProps</code>只会在服务端执行一次。<code>getInitialProps</code>只有在路由切换的时候（如<code>Link</code>组件跳转或路由自定义跳转）时，客户端的才会被执行；</li>
<li>当页面初始化加载时，<code>getInitialProps</code>只会加载在服务端。只有当路由跳转（<code>Link</code>组件跳转或 API 方法跳转）时，客户端才会执行<code>getInitialProps；</code></li>
<li>注意：<code>getInitialProps</code>将不能使用在子组件中。只能使用在<code>pages</code>页面中。</li>
</ul>
<code>getInitialProps</code>入参对象的属性如下：
<ul>
<li><code>pathname</code> ：URL 的 path 部分；</li>
<li><code>query</code> ： URL 的 query 部分，并被解析成对象；</li>
<li><code>asPath</code> ：显示在浏览器中的实际路径（包含查询部分），为<code>String</code>类型；</li>
<li><code>req</code> ： HTTP 请求对象 (只有服务器端有)；</li>
<li><code>res</code> ： HTTP 返回对象 (只有服务器端有)；</li>
<li><code>jsonPageRes</code> ：获取数据响应对象(只有客户端有)；</li>
<li><code>err</code> ：渲染过程中的任何错误；</li>
</ul>
当然除了上面的Link跳转之外，还可以通过事件跳转，那么就需要借助<code>next/router</code>实现客户端路由切换：
<div class="cnblogs_code">
<pre>import Router from 'next/router'

export default () =>
<div>
Click Router.push('/game')}>here to read more
</div></pre>
</div>
<code>这个Router</code>对象的 API 如下：
<ul>
<li><code>route</code> ：当前路由的<code>String</code>类型；</li>
<li><code>pathname</code> ：不包含查询内容的当前路径，为<code>String</code>类型；</li>
<li><code>query</code> ：查询内容，被解析成<code>Object</code>类型. 默认为<code>{}；</code></li>
<li><code>asPath</code> ：展现在浏览器上的实际路径，包含查询内容，为<code>String</code>类型；</li>
<li><code>push(url, as=url)</code> ：页面渲染第一个参数 url 的页面，浏览器栏显示的是第二个参数 url；</li>
<li><code>replace(url, as=url)</code> ： performs a <code>replaceState</code> call with the given url；</li>
<li><code>beforePopState(cb=function)</code> ：在路由器处理事件之前拦截；</li>
</ul>
注意：Router.beforePopState() 截断Router操作的设置只有在客户端生效（需在componentDidMount中设置）且进入此函数中的方法只有Router栈中有值的时候才可以！
<code>push</code> 和 <code>replace</code> 函数的第二个参数<code>as</code>，是为了装饰 URL 作用。如果你在服务器端设置了自定义路由将会起作用；
 ok，通过上面的了解，我们已经学会了页面跳转的几种方式，既然可以跳转，那么可以监听跳转吗？即路由事件：
监听路由相关事件。下面是事件支持列表：
<div>
<ul>
<li><code>routeChangeStart(url)</code> --- 路由开始切换时触发</li>
<li><code>routeChangeComplete(url)</code> --- 完成路由切换时触发</li>
<li><code>routeChangeError(err, url)</code> --- 路由切换报错时触发</li>
<li><code>beforeHistoryChange(url)</code> --- 浏览器 history 模式开始切换时触发</li>
<li><code>hashChangeStart(url)</code> --- 开始切换 hash 值但是没有切换页面路由时触发</li>
<li><code>hashChangeComplete(url)</code> --- 完成切换 hash 值但是没有切换页面路由时触发</li>
</ul>
我们尝试调用路由开始切换的事件：<code>routeChangeStart</code>
<div class="cnblogs_code">
<pre>// 监听路由开始切换时触发
static onListenRouteChangeStart = () => {
Router.events.on('routeChangeStart', (url) => {
 console.log('routerUrl' + url);
});
} 
componentDidMount () {
RouterApi.onListenRouteChangeStart();
}</pre>
</div>
如果不需要监听了，请释放它：Router.onRouteChangeStart = null；
既然都聊都了路由这块，那么就说说路由的另一个概念：浅层路由；
所谓浅路由模式，其实就是浅层路由允许你改变 URL 但是不执行<code>getInitialProps</code>生命周期。你可以加载相同页面的 URL，得到更新后的路由属性<code>pathname</code>和<code>query</code>，并不失去 state 状态。
你可以给<code>Router.push</code> 或 <code>Router.replace</code>方法加如：<code>shallow: true</code>参数。如下面的例子所示：
<div class="cnblogs_code">
<pre>const href = '/?counter=10'
const as = href
Router.push(href, as, { shallow: true })；</pre>
</div>
现在 URL 更新为<code>/?counter=10</code>。在组件里查看<code>this.props.router.query</code>你将会看到更新的 URL。
！需要注意的是：浅路由模式只支持相同的 URL，如果页面路由变化，还是会触发 getInitialProps；
更多的使用场景，可能类似与分页数据，我们只改变 <code>page</code> ，而不需要整个初始化。当然，我们可以监听：
<div class="cnblogs_code">
<pre>componentWillReceiveProps(nextProps) {
const { pathname, query } = nextProps.url
// fetch data based on the new query
}</pre>
</div>
你可以在componentdidupdate钩子函数中监听 URL 的变化：
<div class="cnblogs_code">
<pre>componentDidUpdate(prevProps) {
const { pathname, query } = this.props.router
// verify props have changed to avoid an infinite loop
if (query.id !== prevProps.router.query.id) {
// fetch data based on the new query
}
}</pre>
</div>
对于路由的一些基本情况如上了，有具体问题具体分析；
那么下面我们来练习一下高阶组件：如果你想应用里每个组件都处理路由对象，你可以使用<code>withRouter</code>高阶组件。下面是如何使用它；
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import { withRouter } from 'next/router'

class RedEnvelope extends Component {
render () {
return (
 <div className="envelope-box">
 我是红包组件
 <h1>{this.props.router.query.title}</h1>
 </div>
)
}
}
export default withRouter(RedEnvelope);</pre>
</div>
我在game页面调用这个组件里面调用到this.props.router这个对象了：
<img src="https://img2018.cnblogs.com/blog/1527853/201908/1527853-20190816124639597-798265344.png">
 
ok，了解这些，就开始写项目吧，后面的配置和部署，接下来再更新
</div> 
来源：https://www.cnblogs.com/thomas-yang-github/p/11358533.html

頁: [1]

琼殿技术论坛's Archiver

跟文档学习next.js