如何安装Next.js🏠 返回首页开始使用Next.js的步骤说明要安装Next.js，你需要安装Node.js。

开始使用Next.js的步骤说明

要安装Next.js，你需要安装Node.js。

请确保你有最新版本的Node。通过在终端运行node -v ，并与nodejs.org/ 上列出的最新LTS版本进行比较来检查。

在你安装了Node.js之后，你的命令行中就会有npm 命令。

如果你在这个阶段有任何困难，我推荐你看我为你写的以下教程。

现在你已经将Node更新到了最新版本，并且npm ，在你喜欢的任何地方创建一个空文件夹，例如在你的主文件夹中，然后进入其中。

并创建你的第一个Next项目

mkdir firstproject
cd firstproject

现在使用npm 命令将其初始化为一个Node项目。

-y 选项告诉npm ，使用项目的默认设置，弹出一个样本package.json 文件。

npm init result

现在安装Next和React。

npm install next react react-dom

你的项目文件夹现在应该有2个文件。

package.json (见我的相关教程)
package-lock.json (见我的包-锁教程)

和node_modules 文件夹。

用你喜欢的编辑器打开项目文件夹。我最喜欢的编辑器是VS Code。如果你安装了该编辑器，你可以在终端运行code . ，在编辑器中打开当前文件夹（如果该命令对你不起作用，请看这个）

打开package.json ，它现在有这样的内容。

{
  "name": "mysite",
  "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上可用，在localhost上。

npm run dev

在你的浏览器中打开http://localhost:3000来查看。

The first Next app screen