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:
创建我们的第一个页面
现在我们来创建第一个页面。
创建一个名为 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 上重新加载,应用程序将会发生什么情况?
错误处理
默认情况下,Next.js会跟踪这些错误,并在浏览器中显示。这可以帮助您识别错误并快速修复错误。
一旦修复了这个问题,页面就会立即出现,而不需要重新加载页面。我们在Webpack的热模块替换模块的帮助下,Next.js实现了默认支持。
你是最棒的
似乎你已经建立了你的第一个Next.js应用!认为怎么样?如果你喜欢的话,让我们更深入去学习吧。