P01:Next.js教程-Next.js简介和创建项目
Next.js 简介
Next.js 是一个轻量级的 React 服务端渲染应用框架。
Next.js 优点:
- 完善的 React 项目架构,搭建轻松。比如:Webpack 配置,服务器启动,路由配置,缓存能力,这些在它内部已经完善的为我们搭建完成了。
- 自带数据同步策略,解决服务端渲染最大难点。把服务端渲染好的数据,拿到客户端重用,这个在没有框架的时候,是非常复杂和困难的。有了 Next.js,它为我们提供了非常好的解决方法,让我们轻松的就可以实现这些步骤。
- 丰富的插件帮开发人员增加各种功能。每个项目的需求都是不一样的,包罗万象。无所不有,它为我们提供了插件机制,让我们可以在使用的时候按需使用。你也可以自己写一个插件,让别人来使用。
- 灵活的配置,让开发变的更简单。它提供很多灵活的配置项,可以根据项目要求的不同快速灵活的进行配置。
目前Next.js
是 React 服务端渲染的最佳解决方案,所以如果你想使用 React 来开发需要 SEO 的应用,基本上就要使用Next.js
。
创建 Next.js 项目
创建一个Next.js
项目,可以有两种方法进行,一种是手动创建,另一种是用create-next-app
(脚手架)来创建。
一、手动创建 Next.js 项目
我们先手动创建 Next.js 项目,这种方式虽然麻烦点,但是可以更容易让新手了解过程和原理。
建立文件夹
先在你喜欢的位置新建一个文件夹,名称可以根据自己想法自定义,我这里是在 D 盘里建立了一个叫NextDemo
文件夹。
D: mkdir NextDemo npm init
这里的npm init
是用来把文件夹初始化成可管理的项目的,其实就是在根目录里给你添加了一个package.json
的文件。
安装所需要的依赖包
使用 npm 来安装所需要的项目依赖包,npm 安装时记得要使用--save
,先来安装下面三个react
、react-dom
和next
。
npm install --save react react-dom next
当然你也可以通过 yarn 来安装
yarn add react react-dom next
安装完可以打开package.json
文件查看一下dependencies
的版本。
增加快捷命令
为了开发时简便的使用 Next.js 中的操作命令行工具,所以把常用的配置到package.json
中,代码如下:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev" : "next" , "build" : " next build", "start" : "next start" },
创建 pages 文件夹和文件
在根目录下,创建一个pages
文件夹,这个文件夹是 Next 规定的,在这个文件夹下写入的文件,Next.js 会自动创建对应的路由。有了文件夹以后,在文件下面创建一个index.js
文件,这就是我们的首页了,然后用React Hooks
的写法,写个最简单的Hello World
。
function Index(){ return ( <div>Hello World</div> ) } export default Index
写好后在终端中使用next start
来打开预览,在浏览器中可以看到输出了正确的结果。
二、creact-next-app 快速创建 Next.js 项目
create-next-app
可以快速的创建Next.js
项目,它就是一个脚手架,有了它只要一句命令就可以把项目需要的依赖包和基本目录都生成,在实际工作中基本不用手动的形式创建,全部使用create-next-app
来创建。
安装 create-next-app
使用脚手架前,需要先进行全局安装。
npm install -g create-next-app
安装完成后,就可以通过create-next-app
命令来创建一个 Next.js 的项目了。
创建 Next.js 项目
目前可以支持三种方式的创建,分别是用npx
,yarn
和create-next-app
命令来进行安装,安装的结构都是完全一样的,所以就给大家演示其中的一种npx
的形式。
npx 是 Node 自带的 npm 模块,所以你只要安装了 Node 都是可以直接使用 npx 命令的。
但低版本的 Node 是不带这个命令的,所以你需要手都安装一下。
npm install -g npx
打开命令提示符工具,然后进入 D 盘,然后直接用下面的npx
命令创建项目。
npx create-next-app next-create
输入后按回车,就会自动给我们进行安装项目需要的依赖。并且会给我们添加好命令。 稍等一会,全部安装完成后,可以进入项目母乳,执行 next start 来测试项目。
在浏览器中输入http://localhost:3000/
,看到下面的内容,说明项目生成成功.
项目结构介绍
看到结果后,用 VSCode 打开目录,可以看到已经有了很多自动建立好的文件和文件夹,下面就简单的介绍一下这些它们的用处:
- components 文件夹:这里是专门放置自己写的组件的,这里的组件不包括页面,指公用的或者有专门用途的组件。
- node_modules 文件夹:Next 项目的所有依赖包都在这里,一般我们不会修改和编辑这里的内容。
- pages 文件夹:这里是放置页面的,这里边的内容会自动生成路由,并在服务器端渲染,渲染好后进行数据同步。
- static 文件夹: 这个是静态文件夹,比如项目需要的图片、图标和静态资源都可以放到这里。
- .gitignore 文件: 这个主要是控制 git 提交和上传文件的,简称就是忽略提交。
- package.json 文件:定义了项目所需要的文件和项目的配置信息(名称、版本和许可证),最主要的是使用
npm install
就可以下载项目所需要的所有包。
当你了解项目目录和文件后就可以试着修改一下项目,简单的尝试一下了。
总结
以上就是关于 next.js 安装的全部内容,主要讲解的就是手动创建 next.js 项目和利用create-next-app
来创建项目和生成项目的基本结构介绍。
码云笔记 » P01:Next.js教程-Next.js简介和创建项目