next. js_如何安装Next.js

next. js

To install Next.js, you need to have Node.js installed.

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

Make sure that you have the latest version of Node. Check with running node -v in your terminal, and compare it to the latest LTS version listed on https://nodejs.org/.

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

After you install Node.js, you will have the npm command available into your command line.

安装Node.js之后，您将在命令行中使用npm命令。

If you have any trouble at this stage, I recommend the following tutorials I wrote for you:

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

• how to install Node.js

  如何安装Node.js

• how to update Node.js

  如何更新Node.js

• An introduction to the npm package manager

  npm软件包管理器简介

• Unix Shells Tutorial

  Unix Shell教程

• How to use the macOS terminal

  如何使用macOS终端

• The Bash Shell

  重击壳

Now that you have Node updated to the latest version and npm, create an empty folder anywhere you like, for example in your home folder, and go into it:

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

mkdir nextjs
cd nextjs

and create your first Next project

并创建您的第一个Next项目

mkdir firstproject
cd firstproject

Now use the npm command to initialize it as a Node project:

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

npm init -y

The -y option tells npm to use the default settings for a project, populating a sample package.json file.

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

Now install Next and React:

现在安装Next和React：

npm install next react react-dom

Your project folder should now have 2 files:

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

• package.json (see my tutorial on it)

  package.json ( 请参阅我的教程 )

• package-lock.json (see my tutorial on package-lock)

  package-lock.json ( 请参阅我的package-lock教程 )

and the node_modules folder.

和node_modules文件夹。

Open the project folder using your favorite editor. My favorite editor is VS Code. If you have that installed, you can run code . in your terminal to open the current folder in the editor (if the command does not work for you, see this)

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

Open package.json, which now has this content:

打开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"
  }
}

and replace the scripts section with:

并将scripts部分替换为：

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

to add the Next.js build commands, which we’re going to use soon.

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

Now create a pages folder, and add an index.js file.

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

In this file, let’s create our first React component.

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

We’re going to use it as the default export:

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

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

export default Index

Now using the terminal, run npm run dev to start the Next development server.

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

This will make the app available on port 3000, on localhost.

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

Open http://localhost:3000 in your browser to see it.

在浏览器中打开http：// localhost：3000进行查看。

翻译自: https://flaviocopes.com/how-to-install-nextjs/

next. js