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

rockswang 发布于2019-08-23 11:38 / 1322人阅读

摘要：接下来我们运行一下。因此，我们需要新建一个目录。接下在再重新启动一下试试。因为默认开启服务端渲染，也就无需我们进行任何的配置，因此现在这个极其简单的应用就是一个。代码地址参考文章服务端渲染与打造高可靠与高性能的同构解决方案

写在前面

说实话，我个人还是觉得文笔越来越不错了，以前的文章都是一个问题闷到天黑，文章写的有点乱由于文章过于庞大导致不是一气呵成的，思路有时候会很混乱。所以我也准备开始写系列文，哈哈，尝试一下嘛~系列文的好处就是每次讲一个点，争取讲的细致一些，希望大家多多指教~

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 = () => (
  我是Next的首页
);
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 = () => (
  
    我是Next的首页
    
      用户列表页
    
  
);
export default Home;

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

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

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

代码地址

参考文章

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

GPU云服务器云服务器 next.js next.js 样式 Next.js 12 正式发布、Yarn 入门系列课程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97246.html

Next.js踩坑入门系列（二）— 添加Antd && CSS

摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由陆续更新... 个人对于脚手架的UI有一种执...

lifesimple 2019-08-23 11:38 评论0 收藏0
nextjs踩坑

摘要：踩坑几乎一整年没咋写文章，主要是懒，加上工作也挺忙。遇到一些坑，也有一些收获这里记录一下。个人习惯使用启动服务。总结说了上面那么多，其实官方文档里都有相关例子，就当我的个人踩坑记录吧。 Next.js踩坑几乎一整年没咋写文章，主要是懒，加上工作也挺忙。但是想趁着年底发一篇，希望明年更勤奋一点。其实不是没东西写，就是想深入一个东西还是很困难的，要查各种资料，最终还是懒就是了。 next...

JayChen 2019-08-23 15:06 评论0 收藏0
学习 Next.js: 入门

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署哪位分高的帮忙创建一个的标签谢谢现暂时放在标签下面了新建文章有时间限制一会全部发上来这是最近两天原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Miracle 2019-08-20 16:54 评论0 收藏0
Next.js项目实战踩坑指南

摘要：项目实战踩坑指南移动端，滚动卡顿解决方案主容器增加样式路由跳转后样式丢失原因下样式根据页面动态加载，浏览器缓存文件造成样式不更新。跨域及传递的问题第一步，登录成功后服务器返回。第二步，浏览器自动缓存，再后续请求中携带此。项目实战踩坑指南 1. 移动端overflow:auto，ios滚动卡顿解决方案：主容器增加样式-webkit-overflow-scrolling: touc...

用户83 2019-08-23 13:46 评论0 收藏0
学习 Next.js: 使用路由掩码创建干净的URL

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用路由掩码创建干净的在前面的课程中我们学到了如何使用查询串创建动态页面一次为基础我们一篇博客的原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

silenceboy 2019-08-20 16:56 评论0 收藏0