React服务端渲染框架Next.js入门之旅一：创建项目

Next.js是一个轻量级的React服务端渲染应用框架。

创建Next.js项目

手动创建

打开命令行工具，进入想要放项目的文件夹下，创建一个新的文件夹用来放置Next项目：

mkdir NextDemo

进入NextDemo文件夹，进行项目初始化(建立package.json)：

npm init

用vscode打开NextDemo，安装依赖包：

npm install --save react react-dom next

安装好了依赖包：

手动增加一些配置项（package.json文件）：

小demo 

在根目录下新建pages文件夹，在该文件夹下新建index.js文件：

function Index(){
    return (
        <div>Hello Next.js</div>
    )
}

export default Index;

运行项目：

npm run dev

运行效果：

create-next-app快速创建项目 

打开cmd命令行工具，进行全局安装：

npm install -g create-next-app

有npx、yarn、create-next-app三种创建方式，这里以npx创建方式为例。

进入放项目的目录，使用如下命令创建项目：

npx create-next-app next-create

创建成功：

运行项目：

yarn dev

实现效果：