如何安装Next.js

分步说明以开始使用Next.js

要安装Next.js,您需要Node.js已安装。

确保您具有最新版本的Node。跑步检查node -v在您的终端中,并将其与列出的最新LTS版本进行比较https://nodejs.org/

安装Node.js之后,您将拥有npm命令可用于您的命令行。

如果您在此阶段遇到任何麻烦,建议您为我编写以下教程:

现在,您已将Node更新到最新版本,并且npm,在您喜欢的任何位置(例如在主文件夹中)创建一个空文件夹,然后进入该文件夹:

mkdir nextjs
cd nextjs

并创建您的第一个Next项目

mkdir firstproject
cd firstproject

现在使用npm将其初始化为Node项目的命令:

npm init -y

-y选项告诉npm使用项目的默认设置,填充示例package.json文件。

npm init result

现在安装Next和React:

npm install next react react-dom

您的项目文件夹现在应具有2个文件:

node_modules文件夹。

使用您喜欢的编辑器打开项目文件夹。我最喜欢的编辑是VS代码。如果已安装,则可以运行code .在终端中打开编辑器中的当前文件夹(如果该命令对您不起作用,请参阅

打开package.json,现在具有以下内容:

{
  "name": "airbnbclone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

并更换scripts具有以下内容的部分:

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

添加Next.js构建命令,我们将很快使用它。

the package.json file

现在创建一个pages文件夹,并添加一个index.js文件。

在这个文件中,让我们创建第一个React组件。

我们将使用它作为默认导出:

const Index = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

export default Index

现在使用终端,运行npm run dev启动Next开发服务器。

这将使该应用程序在本地主机上的端口3000上可用。

npm run dev

打开http://localhost:3000在浏览器中查看它。

The first Next app screen

免费下载我的Next.js手册


接下来的更多教程: