React服务端渲染框架Next.js

Next.js 简介
创建Next.js项目
- 一、手动创建Next.js项目
- - 建立文件夹
  - 安装所需要的依赖包
  - 增加快捷命令
  - 创建pages文件夹和文件
- 二、creact-next-app 快速创建 Next.js 项目
- - 安装 create-next-app
  - 创建 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的文件。

package.json 创建说明

package name:            你的项目名字叫啥
version:                 版本号
description:             对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
git repository: keywirds：                项目关键字（我也不知道有啥用，所以我就不写了）
author:                   作者的名字（也就是你叫啥名字）
license:                  发行项目需要的证书（这里也就自己玩玩，就不写了）

 npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help init` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (nextdemo) npmInitNextDemo
Sorry, name can no longer contain capital letters.
package name: (nextdemo) nextdemo
version: (1.0.0)
description: 手动创建next项目
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\Centos\PHPstudyWWW\react\NextDemo\package.json:{"name": "nextdemo","version": "1.0.0","description": "手动创建next项目","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}Is this OK? (yes) yes

这里的 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 或 npm run dev 来测试项目。

在浏览器中输入 http://localhost:3000/,看到下面的内容，说明项目生成成功。

项目结构介绍

看到结果后，用VSCode打开目录，可以看到已经有了很多自动建立好的文件和文件夹，下面就简单的介绍一下这些它们的用处：

components文件夹：
这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。

node_modules文件夹：
Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。

pages文件夹：
这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。

static文件夹：
这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。

.gitignore文件：
这个主要是控制git提交和上传文件的，简称就是忽略提交。

package.json文件：
定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用npm install 就可以下载项目所需要的所有包。

当你了解项目目录和文件后就可以试着修改一下项目，简单的尝试一下了。

P01：Next.js简介和创建项目相关推荐

【个人笔记】《知了堂》node.js简介及创建应用
Node.js 究竟是什么? Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个( ...
egg mysql 项目实战,egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
1.egg项目的创建创建项目 npm init egg --type=simple 安装依赖 npm i 依赖安装完成后运行命令 npm run dev 即可运行项目参考官方文档 https:// ...
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择"ASP.NET MVC 3 Web应用程序",将项目名称修改为 ...
WebStorm中Node.js项目配置教程（1）——创建项目
Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...
【全开源+免费更新】doodoo.js创建项目教程
创建项目 async/await // 下载demo git clone https://github.com/doodooke/doodoo.js.git // 安装依赖 yarn install ...
egret可以用php做后端吗,Egret引擎开发指南之创建项目_node.js
Egret提供非常方便的创建工具,我们把创建后的文件总和称之为项目.在后面的操作中,我们对创建的项目进行操作,具体创建步骤如下: 需要注意的是Egret支持Windows和Mac OS X 两个平台. ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程
一.什么是 SSR ? SSR 就是服务器渲染,什么是服务器渲染?由服务器组装好 DOM 元素,生成 HTML 字符串给到浏览器,也就是在浏览器里面是可以看到整个页面的 DOM 源码的. SS ...
Three.js的学习之路（一丶创建项目/画出第一个3D模型）
前言: 最近有点无聊,学学three.js,记录一下学习过程,随便给大家避避坑. 我的目标是完成一个室内设计预览的效果(下图),任重而道远啊,最后能不能坚持下去也不知道,不一定有这么多时间去搞,拭目以 ...

P01：Next.js简介和创建项目