Next.js + TS 从零开始写一个前端导航页面（一、安装）

时间：

分类：

nextjs

字数：

734 字

时长：

大约需要 3 分钟

次数：

0 人阅读

本系列文章主要为了改造 https://www.jijian.link 导航页面。

本系列文章前置要求，电脑已安装 nodejs 环境，如果未安装，直接去官网 https://nodejs.org/zh-cn/ 下载安装即可。

如果安装失败，难搞哦，从入门到放弃吧。

安装成功在 cmd 输入以下命令，有成功输出版本号表示安装成功：

1
2
3
4
5
$ node -v
v10.16.0

$ npm -v
6.9.0

建议安装 10.x 以上的版本，低版本不支持最新的 es 语法。

next.js 介绍

一个基于 React 封装的服务端渲染框架。可用于服务端渲染页面，也可用于预渲染生成静态页面。

相关链接

github: https://github.com/zeit/next.js
官网： https://nextjs.org
中文文档： https://nextjs.frontendx.cn/

安装

  1. 电脑任意位置新建目录，名字任取。
  1. 初始化 package.json 文件，但是 name 不能叫 next 否则后面会安装失败
1
$ npm init

一路 回车键 即可生成 package.json 文件。

  1. 安装 next 以及 react

建议先在目录下新增 .npmrc 文件，设置 npm 命令使用淘宝镜像地址，毕竟这原因大家都懂的。

1
2
3
4
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

安装依赖

1
$ npm install --save next react react-dom

出现 added 782 packages from 307 contributors in 254.319s 表示安装成功。
如果安装途中停止不动了，就 ctrl + c 结束重新开始即可。

  1. 添加命令

package.json 文件 scripts 字段添加运行命令。

1
2
3
4
5
6
7
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
  1. 新建文件 ./pages/index.js
1
export default () => <div>Welcome to next.js!</div>
  1. 运行

cmd 控制台执行 npm run dev 命令

问题：

Port 3000 is already in use. 表示 3000 端口被占用
Browserslist: caniuse-lite is outdated. Please run next command 'npm update' 表示需要更新包，可以忽略。

运行成功如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ npm run dev
> jijian.link@1.0.0 dev D:\next
> next

[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[ ready ] compiled successfully - ready on http://localhost:3000
[ wait ]  compiling ...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

[ ready ] compiled successfully - ready on http://localhost:3000

浏览器访问 http://localhost:3000/ 应该能正常看到 Welcome to next.js!

至此一个最基本的入门仪式已经完成，高楼大厦的路基已经建好。

完整的 package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "jijian.link",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.3.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-04-24/next-install/

如果您觉得文章不错，可以点击文章中的广告支持一下！