Show
2019年11月04日 11:34 · 阅读 4861
Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现React的服务端渲染,从而加快首屏打开速度,也可以作SEO(收索引擎优化了)。在没有Next.js的时候,用React开发需要配置很多繁琐的参数,如Webpack配置,Router配置和服务器端配置等....。如果需要作SEO,要考虑的事情就更多了,怎么样服务端渲染和客户端渲染保持一致就是一件非常麻烦的事情,需要引入很多第三方库。但有了Next.js,这些问题都解决了,使开发人员可以将精力放在业务逻辑上,从繁琐的配置中解放出来。 浏览器中输入http://localhost:3000/ components文件夹:这里是专门放置自己写的组件的,这里的组件不包括页面,指公用的或者有专门用途的组件。 node_modules文件夹:Next项目的所有依赖包都在这里,一般我们不会修改和编辑这里的内容。
pages文件夹:这里是放置页面的,这里边的内容会自动生成路由,并在服务器端渲染,渲染好后进行数据同步。 static文件夹: 这个是静态文件夹,比如项目需要的图片、图标和静态资源都可以放到这里。 .gitignore文件: 这个主要是控制git提交和上传文件的,简称就是忽略提交。 package.json文件:定义了项目所需要的文件和项目的配置信息(名称、版本和许可证),最主要的是使用npm install 就可以下载项目所需要的所有包 直接在根目录下的pages文件夹下,新建一个jspang.js页面。然后写入下面的代码: 只要写完上面的代码,Next框架就自动作好了路由,这个也算是Next的一个重要优点,给我们节省了大量的时间。 现在要作一个更深的页面,比如把有关博客的界面都放在这样的路径下http://localhost:3000/blog/nextBlog,其实只要在pages文件夹下再建立一个新的文件夹blog,然后进入blog文件夹,新建一个nextBlog.js文件,就可以实现了。
制作组件也同样方便,比如要建立一个jspang组件,直接在components目录下建立一个文件jspang.js,然后写入下面代码: 组件写完后需要先引入,比如我们在Index页面里进行引入:
使用就非常简单了,直接写入标签就可以。
路由-基础和基本跳转页面跳转一般有两种形式,第一种是利用标签,第二种是用js编程的方式进行跳转,也就是利用Router组件。先来看一下标签的形式如何跳转。 标签式导航在编写代码之前,先删除index.js中的代码,保证代码的最小化。使用标签式导航需要先进行引入,代码如下:
然后新建两个页面jspangA.js和jspangB.js,新建后写个最简单的页面,能标识出来A、B两个页面就好。
有了两个页面后,可以编写首页的代码,实现跳转了。
用标签进行跳转是非常容易的,但是又一个小坑需要你注意一下,就是他不支持兄弟标签并列的情况。
如果这样写会直接报错,报错信息如下
但是你可以把这两个标签外边套一个父标签,就可以了,比如下面的代码就没有错误。
Router模块进行跳转在Next框架中还可以使用Router模块进行编程式的跳转,使用前也需要我们引入Router,代码如下:
然后在Index.js页面中加入,直接使用Router进行跳转就可以了。
这样写只是简单,但是还是耦合性太高,跟Link标签没什么区别,你可以修改一下代码,把跳转放到一个方法里,然后调用方法。
这样也是可以实现跳转的,而且耦合性也降低了,所以个人更喜欢这种跳转方式。这节课主要学习了Next的两种跳转方式,第一种是标签式跳转,第二种是编程式跳转。 路由-跳转时用query传递和接受参数项目开发中一般都不是简单的静态跳转,而是需要动态跳转的。动态跳转就是跳转时需要带一个参数或几个参数过去,然后在到达的页面接受这个传递的参数,并根据参数不同显示不同的内容。比如新闻列表,然后点击一个要看的新闻就会跳转到具体内容。这些类似这样的需求都都是通过传递参数实现的。 只能用query传递参数这节课作一个“找小姐姐”的例子,通过这个例子来通俗易懂的讲解一下路由带参数的知识。在Next.js中只能通过通过query(?id=1)来传递参数,而不能通过(path:id)的形式传递参数,这个一定要记住,在工作中很容易就容易记混。 现在我们改写一下pages文件夹下的index.js文件。
这样编写query参数就可以进行传递过去了,接下来就是要接受参数了。 接收传递过来的参数现在还没有小姐姐对应的页面,所以我们要创建xiaojiejie.js页面,并写下下面的代码。
withRouter是Next.js框架的高级组件,用来处理路由用的,这里先学简单用法,以后还会学习的。通过这种方式就获得了参数,并显示在页面上了。 编程式跳转传递参数回了这种标签式跳转传递参数的形式,那编程式跳转如何传递那,其实也可以简单使用?加参数的形式,代码如下:
这种形式跳转和传递参数是完全没有问题的,但是不太优雅(优雅这东西很难界定,其实你完全可以看成一种装X,这太简单了,我需要装个X),所以也可以写成Object的形式。
嗯,这样写确实优雅很多(我们一定要面向对象编程,有对象比没对象要好)。 其实标签也可以写成这种形式,比如我们把第一个修改成这种形式.
路由-六个钩子事件的讲解路由的钩子事件,也就是当路由发生变化时,可以监听到这些变化事件,执行对应的函数。 routerChangeStart路由发生变化时在监听路由发生变化时,我们需要用Router组件,然后用on方法来进行监听,在pages文件夹下的index.js,然后写入下面的监听事件,这里我们只打印一句话,就不作其他的事情了。代码如下:
这个时路由发生变化时,时间第一时间被监听到,并执行了里边的方法。 routerChangeComplete路由结束变化时路由变化开始时可以监听到,那结束时也时可以监听到的,这时候监听的事件是routerChangeComplete。
beforeHistoryChange浏览器history触发前history就是HTML中的API,如果这个不了解可以百度了解一下,Next.js路由变化默认都是通过history进行的,所以每次都会调用。 不适用history的话,也可以通过hash
routeChangeError路由跳转发生错误时
转变成hash路由模式还有两种事件,都是针对hash的,所以现在要转变成hash模式。hash模式下的两个事件hashChangeStart和hashChangeComplete,就都在这里进行编写了。
在下面的jsx语法部分,再增加一个链接,使用hash来进行跳转,代码如下:
为了方便你学习,我这里给出index.js的全部代码,你可以在练习时进行参考。
在getInitialProps中用Axios获取远端数据在Next.js框架中提供了getInitialProps静态方法用来获取远端数据,这个是框架的约定,所以你也只能在这个方法里获取远端数据。不要再试图在声明周期里获得,虽然也可以在ComponentDidMount中获得,但是用了别人的框架,就要遵守别人的约定。 安装和引入Axios插件安装
引入
getInitialProps中获取数据在xiaojiejie.js页面中使用getInitialProps,因为是远程获取数据,所以我们采用异步请求的方式。数据存在了Easy Mock中,地址如下:
获得数据后,我们需要把得到的数据传递给页面组件,用{}显示出来就可以了。
这样我们就利用Axios从远端获取了数据,为了方便你学习,这里给出xiaojiejie.js的所有代码。
使用Style JSX编写页面的CSS样式在Next.js中引入一个CSS样式是不可以用的,如果想用,需要作额外的配置。因为框架为我们提供了一个style jsx特性,也就是把CSS用JSX的语法写出来。如果你以前学过Vue,那这种写法你是非常熟悉的。 初识Style JSX语法 把字体设成蓝色在pages文件夹下,新建一个jspang.js文件。然后写入下面的代码:
这个是一个最简单的页面,只在层中写了一句话。这时候我们想把页面中字的颜色变成蓝色,就可以使用Style JSX语法。直接在<></>之间写下如下的代码:
主要所有的css样式需要用{}进行包裹,否则就会报错。这时候你打开浏览器进行预览,字体的颜色就变成了蓝色。 自动加随机类名 不会污染全局CSS加入了Style jsx代码后,Next.js会自动加入一个随机类名,这样就防止了CSS的全局污染。比如我们把代码写成下面这样,然后在浏览器的控制台中进行查看,你会发现自动给我们加入了类名,类似jsx-xxxxxxxx。
动态显示样式Next.js使用了Style jsx,所以定义动态的CSS样式就非常简单,比如现在要作一个按钮,点击一下,字体颜色就由蓝色变成了红色。下面是实现代码。
这样就完成了CSS的动态显示,是不是非常容易。这节课主要学习了Style jsx的一些知识,有了这些知识,可以让我们的页面开始漂亮起来了。 Lazy Loading实现模块懒加载懒加载模块这里使用一个在开发中常用的模块Moment.js,它是一个JavaScript日期处理类库,使用前需要先进行安装,这里使用yarn来进行安装。
然后在pages文件夹下,新建立一个time.js文件,并使用刚才的moment库来格式化时间,代码如下:
这个看起来很简单和清晰的案例,缺存在着一个潜在的风险,就是如何有半数以上页面使用了这个momnet的库,那它就会以公共库的形式进行打包发布,就算项目第一个页面不使用moment也会进行加载,这就是资源浪费,对于我这样有代码洁癖的良好程序员是绝对不允许的。下面我们就通过Lazy Loading来进行改造代码。
这时候就就是懒加载了,可以在浏览器中按F12,看一下Network标签,当我们点击按钮时,才会加载1.js,它就是momnet.js的内容。 懒加载自定义组件懒加载组件也是非常容易的,我们先来写一个最简单的组件,在components文件夹下建立一个one.js文件,然后编写如下代码:
有了自定义组件后,先要在懒加载这个组件的文件中引入dynamic,我们这个就在上边新建的time.js文件中编写了。
引入后就可以懒加载自定义模块了,代码如下:
写完代码后,可以看到自定义组件是懒加载的,只有在jsx里用到时,才会被加载进来,如果不使用就不会被加载。 当我们作的应用存在首页打开过慢和某个页面加载过慢时,就可以采用Lazy Loading的形式,用懒加载解决这些问题。 自定义 更加友好的SEO操作既然用了Next.js框架,你就是希望服务端渲染,进行SEO操作。那为了更好的进行SEO优化,可以自己定制标签,定义一般有两种方式。 方法1:在各个页面加上标签先在/pages文件夹下面建立一个header.js文件,然后写一个最简单的Hooks页面,代码如下:
写完后到浏览器中预览一下,可以发现title部分并没有任何内容,显示的是localhost:3000/header,接下来就自定义下。自定义需要先进行引入next/head。
引入后你就可以写一些列的头部标签了,全部代码如下:
这时候再打开浏览器预览,你发现已经有了title。 方法2:定义全局的这种方法相当于自定义了一个组件,然后把在组件里定义好,以后每个页面都使用这个组件,其实这种方法用处不大,也不灵活。因为Next.js已经把封装好了,本身就是一个组件,我们再次封装的意义不大。 比如在components文件夹下面新建立一个myheader.js,然后写入下面的代码:
这时候把刚才编写的header.js页面改写一下,引入自定义的myheader,在页面里进行使用,最后在浏览器中预览,也是可以得到title的。
Next.js框架下使用Ant Design UI让Next.js支持CSS文件在前面的课程中我讲过Next.js默认是不支持CSS文件的,它用的是style jsx,也就是说它是不支持直接用import进行引入css的。 比如在根目录下新建一个文件夹static(其实正常情况下你应该已经有这个文件了),然后在文件夹下建立一个test.css文件,写入一些CSS Style。
然后用import在header.js里引入。
写完这些后到浏览器中进行预览,没有任何输出结果而且报错了。这说明Next.js默认是不支持CSS样式引入的,要进行一些必要的设置,才可以完成。 开始进行配置,让Next.js支持CSS文件先用yarn命令来安装@zeit/next-css包,它的主要功能就是让Next.js可以加载CSS文件,有了这个包才可以进行配置。
包安装好以后就可以进行配置文件的编写了,建立一个next.config.js.这个就是Next.js的总配置文件(如果感兴趣可以自学一下)。
这段代码你有兴趣是可以看看的,其实我对配置文件基本不记忆的,因为配置文件就是别人规定的配置,你写就好。比如要使用CSS就可以把上面这段代码输入到放入到里边的就好了。 修改配置文件需要重新启一下服务,重启服务可以让配置生效,这时候你到浏览器中可以发现CSS文件已经生效了,字变成了绿色。 按需加载Ant Design加载Ant Design在我们打包的时候会把Ant Design的所有包都打包进来,这样就会产生性能问题,让项目加载变的非常慢。这肯定是不行的,现在的目的是只加载项目中用到的模块,这就需要我们用到一个babel-plugin-import文件。
安装完成后,在项目根目录建立.babelrc文件,然后写入如下配置文件。
这样配置好了以后,webpack就不会默认把整个Ant Design的包都进行打包到生产环境了,而是我们使用那个组件就打包那个组件,同样CSS也是按需打包的。 通过上面的配置,就可以愉快的在Next.js中使用Ant Desgin,让页面变的好看起来。 可以在header.js里,引入<Button>组件,并进行使用,代码如下。
然后到浏览器中查看一下结果,这时候Ant Design已经起作用了,我们也完成了在Next.js中,使用Ant Design的目的。 Next.js生产环境打包其实Next.js大打包时非常简单的,只要一个命令就可以打包成功。但是当你使用了Ant Desgin后,在打包的时候会遇到一些坑。
先把这两个命令配置到package.json文件里,比如配置成下面的样子。
然后在终端里运行一下yarn build,如果这时候报错,其实是我们在加入Ant Design的样式时产生的,这个已经在Ant Design的Github上被提出了,但目前还没有被修改,你可以改完全局引入CSS解决问题。 在page目录下,新建一个_app.js文件,然后写入下面的代码。
这样配置一下,就可以打包成功了,然后再运行yarn start来运行服务器,看一下我们的header页面,也是有样式的。说明打包已经成功了。 转载技术胖教程:http://www.jspang.com/posts/2019/09/01/react-nextjs.html#p01%EF%BC%9Anext-js%E7%AE%80%E4%BB%8B%E5%92%8C%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE |