next.js简易入门

Posted 2020-10-04

使用next.js，我们能像php一样，通过js和react来创建可以服务器端渲染的应用。next.js有以下特性：

• 默认服务器端渲染
• 自动分割代码以获取更快的页面载入速度
• 简易的客户端路由，基于页面
• 开发环境使用webpack支持热更新
• 可以由express或者其他nodejs服务端框架来实现服务端代码
• 可以自定义babel和webpack设置

输入以下命令来初始化项目：

mkdir blog
cd blog
npm init -y
npm install --save react react-dom next
mkdir pages

然后打开package.json在script里加上启动脚本：

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

然后运行脚本可以启动服务：

npm run dev

在浏览器打开http://localhost:3000，这时候可以看到404页面。

因为我们还没有创建页面，现在来创建第一个页面。