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

前言

说实话，我个人还是觉得文笔越来越不错了，以前的文章都是一个问题闷到天黑，文章写的有点乱由于文章过于庞大导致不是一气呵成的，思路有时候会很混乱。所以我也准备开始写系列文，哈哈，尝试一下嘛。

系列文的好处就是每次讲一个点，争取讲的细致一些，希望大家多多指教~

Next.js踩坑入门系列

• (一) Hello Next.js
• (二) 添加Antd && CSS
• (三) 目录重构&&再谈路由
• (四) Next.js中期填坑
• (五) 引入状态管理Redux
• (六) 再次重构目录
• (七) 其他相关知识

笔者小白技术栈目前主要是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同构解决方案

QQ群：641113448 （备注：Next.js）