Next.js踩坑入门系列（一）— Hello Next.js!

写在前面

说实话，我我的仍是以为文笔愈来愈不错了，之前的文章都是一个问题闷到天黑，文章写的有点乱因为文章过于庞大致使不是一鼓作气的，思路有时候会很混乱。因此我也准备开始写系列文，哈哈，尝试一下嘛~系列文的好处就是每次讲一个点，争取讲的细致一些，但愿你们多多指教~

Next.js踩坑入门系列

• (一) Hello Next.js
• (二) 添加Antd && CSS
• 陆续更新...

笔者小白技术栈目前主要是react，全家桶里react，react-router，redux等用的差很少了，最近想攻关一下服务端渲染（SSR），提到服务端渲染，一大堆繁琐的webpack配置，后端路由配置等等等等搞得我头大，烦的不行。我这我的不是很喜欢接触新东西，可能每一个人学习方式不一样，我喜欢先会用一个东西，用明白了再去研究它的原理，所以，有没有相似于一键配置或者傻瓜式配置的服务端渲染框架脚手架呢，秉着这个理念，百度了一下就是——Next.js了。

本人很是喜欢create-react-app这个脚手架，可是官方明确代表了目前不支持服务端渲染，因此只好放弃了，其实基于这个脚手架也是能够配置的，不过我仍是先弄一个可用的，而后回来再填坑本身配置吧~

服务端渲染

先来讲一下服务端渲染吧，目前作的项目确实是服务端渲染的，可是不是我搭的，我我的写的一些东西都不是服务端渲染的，因此下面的结论是不少篇文章事后总结的，具体文章在下面，知识这东西就是拿来分享学习的嘛，学会了就是个人~哈哈

客户端渲染

最原始的前端，页面在浏览器获取到JavaScript和CSS等文件以后开始渲染，彻底在客户端（也就是浏览器），路由是客户端路由，也就是如今大部分的SPA单页应用。

服务端渲染

页面由服务端渲染事后直接返回html页面给前端，url的变动会刷新整个页面，也就是之前的php和jsp模式

同构

高端点的词Universal APP，为何要同构，由于客户端渲染存在一个缺点，就是首屏加载过大文件或过多文件会变得特别慢，所以能够把首屏放在客户端来渲染来提高首屏速度，首屏加载事后路又开始交给客户端控制，又变成了SPA应用，整个代码都是用JavaScript来编写，服务端采用nodejs。

Next.js

关于Next.js，我就很少BB了，我写这篇文章的同时也是我第一次接触Next.js因此才叫采坑入门，你们感兴趣的能够去官网学学，还挺详细的 ---> Next.js

新建一个Nextjs应用

学习编程的咱们都知道，入门系列是hello world，这里我以为next.js仍是挺友好的，由于它真的免除了咱们平时所理解的服务端渲染的各类繁杂配置，只须要简单的几步就能够新建一个Universal App。

第一步 安装依赖

好吧，你只须要新建一个文件夹，而后运行下面一段命令

// 初始化应用
yarn init
// 安装三个依赖
yarn add react react-dom next
// package.json配置启动
{
    ...
    // 新增启动方式，选择使用next启动
    "script": {
        "dev": "next"
    }
    ...
}

OK，你已经完成了基于next的服务端搭建，是否是真的很简单。
接下来咱们运行一下yarn dev。

what?竟然报错了，好吧，原来Next.js默认从 pages 目录下取页面进行渲染返回给前端展现，并默认取 pages/index.js 做为系统的首页进行展现。所以，咱们须要新建一个pages目录。接下在再从新启动一下试试。

第二步 新建pages文件夹以及文件

由于3000常常被另外一个项目使用，因此我把启动端口改为3006了，修改script的启动方式便可：

"script": {
    "dev": "next -p 3006"
}

而后咱们访问http://localhost:3006：

ok,获得了一个很是简洁的一个页面，讲道理，我很喜欢这种简洁的页面。为啥404了呢，原来咱们只新建了pages目录，刚刚也说了，它默认根路由页面是pages下的index.js，因此咱们新建一个index.js。

const Home = () => (
  <h1>我是Next的首页</h1>
);
export default Home;

ok,如今就没啥问题了。由于next.js默认开启服务端渲染，也就无需咱们进行任何的配置，所以如今这个极其简单的应用就是一个Universal React APP。从页面元素咱们也能够看出来：

第三步 Next路由

看到这里，新手小伙伴应该跟我同样感叹Next.js强大的同时也会有一个疑问，等一下，怎么就渲染了?路由你都没配置凭啥就出首页了，通常的SPA至少也会配置路由才能进行页面跳转，这里没配置路由首页出来了我还有其余页面呢，怎么办？
原来，这些东西还都是Next给咱们配置好的，刚才说了Next.js默认匹配pages目录的index.js做为根路径/，其余的路径也是这样按文件名匹配的。
而咱们的各类路由跳转依赖的再也不是react-router而是next.js给咱们封装好的路由（其实redux也是，后面会说到）。

/pages/index.js页面 ----> /
import React, { Fragment } from 'react';
import Link from 'next/link';
const Home = () => (
  <Fragment>
    <h1>我是Next的首页</h1>
    <Link href='/userList'>
      <a>用户列表页</a>
    </Link>
  </Fragment>
);
export default Home;

/pages/userList.js ----> /userList
const UserList = () => (
  <h2>我是用户列表页</h2>
);
export default UserList;

厉害了个人哥，不只跳转成功，并且对应的history也都帮咱们封装好了，后退也都正常，并且能够看到，咱们无需在前端或者node端配置任何路由相关，只须要按照它的模板去写就能够了。而且前端页面的跳转也是无刷新的~

不过萝卜白菜各有所爱，虽然我的以为很强大可是看不到路由仍是感受怪怪的，并且写法也有变化，也就是路由必须在pages路径下才能够，这样工程大了之后岂不是会很混乱，并且页面和路由融合在一块儿redux怎么办，感受很臃肿啊，做为一个刚从纯前端SPA过分过来的确定很别扭，我以为不可能这么low吧，确定不会吧，稍后再探索吧。

代码地址

参考文章

服务端渲染与 Universal React App
D2 - 打造高可靠与高性能的React同构解决方案