NextJs 是构建在 React, Webpack 和 Babel 之上的用于服务端渲染 JavaScript 框架。

下面一起来构建一个简单的 Hello World 项目：

1. 初始化项目

1
2
3
mkdir hello-world & cd hello-world/ # 创建项目文件夹并进入
npm init -f  # npm 初始化
npm install next react react-dom -S # 安装必要的依赖

然后, 在 package.json 文件中加入执行脚本。

1
2
3
4
5
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

2. 启动项目

在项目的根目录下, 执行 npm run dev. 然后浏览器访问 http://localhost:3000 (next 启动的端口号默认 3000).
一切顺利的话, 控制台出现如下错误

1
> Couldn't find a `pages` directory. Please create one under the project root

这里其实是 nextjs 的工作机制. 会把 pages/ 文件夹下的文件通过对应的文件名路由的访问而被渲染. 具体内容, 我们之后详细讨论.
在项目根目录下建立 pages/ 文件下, 再次执行 npm run dev.

3. 第一个页面

这次我们应该能在浏览器看到页面了, 但是是一个 404 页面, 这是 nextjs 提供的默认页面, 相应的也会有 500 页面.

尝试在 pages/ 下建立 index.js 文件：

1
2
3
4
5
import React from 'react';

export default () => (
    <h1>Hello World!</h1>
);

非常好, 首页已经成功输入了 Hello World!. 可能你也发现了, 现在去修改 index.js 的内容, 浏览器页面是会实时刷新的.

nextjs 内置了一些默认的 webpack 配置, 我们可以通过项目根目录下新建 next.config.js 去自定义这些设置. 当然, 具体内容我们之后再做讨论.