阅读 12050

Next.js 踩坑入门系列(一)— Hello Next.js!

前言

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

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

Next.js踩坑入门系列

笔者小白技术栈目前主要是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)

文章分类
前端
文章标签