详解使用Next.js构建服务端渲染应用

next.js简介

最近在学React.js，React官方推荐使用next.js框架作为构建服务端渲染的网站，所以今天来研究一下next.js的使用。

next.js作为一款轻量级的应用框架，主要用于构建静态网站和后端渲染网站。

框架特点

1. 使用后端渲染
2. 自动进行代码分割（code splitting），以获得更快的网页加载速度
3. 简洁的前端路由实现
4. 使用webpack进行构建，支持模块热更新（Hot Module Replacement）
5. 可与主流Node服务器进行对接（如express）
6. 可自定义babel和webpack的配置

使用方法

创建项目并初始化

mkdir server-rendered-website
cd server-rendered-website
npm init -y

安装next.js

使用npm或者yarn安装，因为是创建React应用，所以同时安装react和react-dom

npm：

npm install --save react react-dom next

yarn：

yarn add react react-dom next

在项目根目录下添加文件夹pages（一定要命名为pages，这是next的强制约定，不然会导致找不到页面），然后在package.json文件里面添加script用于启动项目：

"scripts": {
 "dev": "next"
}

如下图

创建视图

在pages文件夹下创建index.js文件，文件内容：

const Index = () => (
 <div>
 <p>Hello next.js</p>
 </div>
)

export default Index

运行

npm run next

在浏览器中打开http://localhost:3000/，网页显示如下：

这样就完成了一个最简单的next网站。

前端路由

next.js前端路由的使用方式非常简单，我们先增加一个page，叫about，内容如下：

const About = () => (
 <div>
  <p>This is About page</p>
 </div>
)

export default About;

当我们在浏览器中请求https://localhost:3000/about时，可以看到页面展示对应内容。（==这里需要注意：请求url的path必须和page的文件名大小写一致才能访问，如果访问localhost:3000/About的话是找不到about页面的。==）

我们可以使用传统的a标签在页面之间进行跳转，但每跳转一次，都需要去服务端请求一次。为了增加页面的访问速度，推荐使用next.js的前端路由机制进行跳转。