一、Next.js，新手入门

Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。

Next.js目前已经开源，https://zeit.co/blog/next

安装

Net.js可兼容Windows、Mac和Linux平台。你只需要在系统中安装了Node.js，就可以开始构建Next.jsy应用程序了。

除此之外，您还需要一个文本编辑器来编写代码，以及一个用于调用某些命令的终端应用程序。

如果你使用的是Windows系统，请尝试使用PowerShell。
Next.js可以与任何shell或终端一起工作，但是我们将在本指南中使用一些特定于unix的命令。
我们建议使用PowerShell使其易于跟踪。

首先，通过运行以下命令创建一个示例项目:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然后在hello-next目录中打开"package.json"，并添加下面的NPM脚本。

"scripts": {
    "dev": "next"
  }

现在一切都准备好了。运行以下命令启动开发服务器:

npm run dev

然后从您最喜欢的浏览器中打开 http://localhost:3000

你在屏幕上看到的输出是什么?

404 Page

You'll see a 404 page like this:

image.png

创建我们的第一个页面

现在我们来创建第一个页面。

创建一个名为 pages/index.js 的文件。js并添加以下内容:

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
)

export default Index

现在，如果再次访问 http://localhost:3000，您将看到一个带有“Hello Next.js”的页面。

在这里，我们从 pages/index.js 导出出了一个简单的React组件。同样，您可以编写自己的React组件并导出它。

确保您的React组件是 default export。

现在尝试在 Index 页面中提示语法错误。这里有一个例子:(我们已经简单地删除了</p> HTML标签)

const Index = () => (
  <div>
    <p>Hello Next.js
  </div>
)

export default Index

在 http://localhost:3000 上重新加载，应用程序将会发生什么情况?

image.png

错误处理

默认情况下,Next.js会跟踪这些错误，并在浏览器中显示。这可以帮助您识别错误并快速修复错误。

一旦修复了这个问题，页面就会立即出现，而不需要重新加载页面。我们在Webpack的热模块替换模块的帮助下，Next.js实现了默认支持。

你是最棒的

似乎你已经建立了你的第一个Next.js应用!认为怎么样？如果你喜欢的话，让我们更深入去学习吧。

本文翻译自：https://learnnextjs.com/basics/getting-started