Next的安装

250 阅读1分钟

初始化npm

新建一个名为demo的文件夹,在此文件夹下初始化npm环境。

打开终端,输入命令:

npm init

工程目录下就会出现名为package.json的配置文件。

安装命令

打开终端,输入命令:

npm install --save next react react-dom

添加脚本

package.json文件下添加脚本命令:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

创建入口文件

在目录下创建./pages/index.js,根据next的路由设计,该文件会被视为入口文件。

index.js编写页面代码:

export default () => <div>Welcome to next.js!</div>

启动项目

本地开发启动命令

npm run dev

默认端口为3000,如果想要指定端口

npm run dev -- -p {指定端口号}

比如我指定在端口3001启动项目

QQ_1727606395686.png

访问页面

浏览器访问http://localhost:3001

QQ_1727606410152.png