平安喜乐

next.js

2018/6/13 next.js

# next.js

webpack默认情况下在next.js中受支持，也就是说有错误，next会跟踪错误在显示器中显示，改变错误以后无需加载就可以在webpack的热门模块替换工具在帮组完成此项工作。

运行以下命令创建项目 创建的项目是hello-next

  1. mkdir hello-next

  2. cd hello-next 切换到这个目录下

  3. npm init -y 初始化

  4. npm install --save react react-dom next 下载包 这个地方因为我的是cnpm

  5. mkair pages 创建一个pages文件夹

  6. 打开这个项目，找到package.json并且添加脚本

    image.png

    然后运行npm run dev

# 建立next.js应用程序

  1. git clone https://github.com/arunoda/learnnextjs-demo.git (opens new window)
  2. cd learnnextjs-demo
  3. git checkout navigate-between-pages
  4. npm install
  5. npm run dev

里面不能设样式，因为他只是一个接受href和其他路由相关道具的包装组件。

链接适用于任何事物，可以放置任何自定义的react组件，设置可以放置div在连接中

组件放置的话需要在连接中的唯一要求就是应该接受一个onclick道具。

image.png

组件，不需要将组件放在一个特殊的目录下，唯一的特殊目录是pages，也可以在这个里面创建组件。

# 创建组件的方法

# 第一种

image.png

# 第二种

image.png

# 第三种

image.png

# 第四种

image.png

# url

以下两种方法都是表达一个含义，两种方式

image.png

URL道具只公开页面的主组件，如果页面使用了其他组件，需要的话要用一下方式传递

image.png

# 用路径屏蔽清除URL

image.png

以上代码中，着重注意as，他就是会显示我们在浏览器上看到的URL，

我们美化了浏览器上看到的URL

image.png

上面两个链接，第一个是原来的，第二个是用了as工具以后显示出来的浏览器URL

所以路由屏蔽来在浏览器中运行的很好，只需要在连接中添加as

# 服务器支持干净的URL

这样以后，服务器路径并没有这个标题，我们只有文章中的ID，所以，在这种情况下，我们将ID设置为服务器端查询字符串的param

image.png

从上面的界面拿到ID，然后将ID设置为服务器端查询字符串param

image.png

在以上的界面代码中，我们简单的使用了next.js自定义服务器API创建了一个路由，有了这个，我们为干净的URL添加了服务器端支持。就像这样，我们可以根据自己的需要创建多条路线，不仅限使用express，可以使用任何一个node.js服务器框架，

# 静态异步函数

image.png

Index.getInitialProps是一个静态的异步函数，可以将它放在程序的任何页面中，使用它，就可以获取数据并且将他们作为一个道具发送到我们的页面上。以上的代码是我们抓取蝙蝠侠电视节目并将它们作为“节目”传递到我们的页面。

正如上面getInitialProps函数中多看到的那样，它将获取到的数据数量答应到控制台。这种情况下，只在服务器上打印，因为我们的服务器呈现页面，所以已经有了这些数据，并没有理由在客户端再次获取它。

image.png

在这里，我们只能在浏览器控制台上看到消息，这是因为我们通过客户端导航到我们帖子页面，然后从客户端获取数据是最好的方法，

但是如果直接访问页面，可以看到服务器上打印的消息，但不在客户端中。

在这个页面的getInitialProps函数，的第一个参数是上下文对象，他有一个我们可以获取信息的字段，我们从查询参数中选择了ID，并且从TVMaze API.中获取数据。

# 造型组件

react样式可以分为两类，一是传统的基于CSS文件的样式（包括sass，postCSS等），而是js风格的CSS组件。因为传统的CSS文件样式需要时间，所以一般不用。

推荐用js中的CSS，可以使用它来设置各个组件的样式，而不是导入CSS文件。

next.js在js框架中预装了一个名为styled-jsx的CSS，它允许我们可以为组件编写熟悉的CSS规则，规则不会影响组件甚至不包括子组件。这就意味着，CSS规则是有作用域的。

样式应该放在模板字符串中{``}

使用styled-jsx所有必要的前缀和CSS验证都是在babel插件中完成的，不会有额外的运行时间开销。

# 踩到的坑

我按着文档的内容引入import withRouterfrom 'next/router'

引入内容，一直报错，改正为import {withRouter} from 'next/router'

是因为要引入的是这个方法里面的内容，而不是这个模块。就相当于

const withRouter = require('next/router').withRouter;

就是具体引入这个模块里面的withRouter这个方法里面的内容。

部署next.js应用程序

next.js可以部署到能运行node.js的任何位置只构建一次程序，但是可以根据需求在尽可能多的端口上启动它

# 在本地构建应用程序

首先需要在npm脚本添加

image.png

image.png

然后运行

npm run build

npm run start

部署一个应用程序使用自定义代码，首先要做的事情是 迁出分支 git checkout git checkout clean-urls-ssr

# 导出静态网页应用程序

首先要创建一个next.config.js在应用程序根目录中调用的文件，并添加

image.png

然后在npm脚本package.json里面添加

image.png

然后运行以下命令

npm run build

npm run export

然后你可以在项目中看到一个out文件夹，里面就是到处的HTML内容。

这是一个功能齐全的静态网络应用程序。可以将它部署到任何静态托管服务的地方工作。

image.png

为了测试应用程序

npm install -g serve

serve是一个非常简单的静态web服务器

然后切到out文件夹中

cd out serve -p 8080

然后就可以访问静态应用了

因为

image.png

我们只要求next.js导出索引（/）页面，现在我们要让他可以导出其他页面

image.png

然后运行npm build

npm run export

cd out 一定记得切到导出的文件下

sercve -p 8080 服务端口

然后就可以再8080端口浏览所有页面了

当然还可以继续加例如

image.png

运行以后点击http://localhost:8080/p/learn-nextjs/ (opens new window)可以得到想要的内容

image.png

没有必要一直构建程序，npm run build

如果页面已经存在就是构建过了就不需要构建。

运行npm run export命令式，next.js不会构建应用程序，如果对应用进行了更改，则需要再次构件应用以获取这些更改。

# 延迟加载模块

首先我们需要认识一个模块firebase,这个模块可以用于所有页面中，这是一个非常大的模块，客户端的时候，我们只需要用户导航到不同的页面，所以，如果我们firebase当时可以加载模块的话，我们就可以改进我们的应用程序的初始加载，

运行命令npm run analyze可以进入到一个页面。页面可以清楚地看出

firebase模块包含在**包内。

firebase只有当用户试图导航到不同的页面时，我们才使用该模块。所以，如果我们可以firebase在那个时候加载模块，可以方便很多。

把代码ioad-db.js页面的代码改成一下样子

在这里我们使用import（)函数来加载firebase模块，他返回一个承诺，我们await来等待并解决模块。

image.png

然后代码就是

image.png

然后如果想使用firebase模块的话，在想要使用的页面使用getInitialProps就可以了，它用于require加载firebase模块。

然后字词解析JavaScript包

npm run analyze

firebase包只在第一次加载

第一时间，getInitialProps对一个页面通过lib/ioad-db.js页面导入了firebase模块，应用程序回家再该包，但是第二次，另一个页面也导入这个模块，但是这个时候他已经被加载了，所以不会再一次加载他。