Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
部署web应用程序的最佳方式是作为静态HTML应用程序，如果可能的话。使用静态应用程序，您可以使用像NGINX这样的快速高效的web服务器，或者像ZEIT now或GitHub页面这样具有成本效益的静态托管服务。
但并不是所有的应用都可以作为静态应用来部署，如果你的应用需要在运行时生成动态页面，你就不能将它作为一个静态应用来部署。
如果你可以将你的应用归类为静态应用，您可以使用next.js来构建它。
Next.js3.0带来了新的特性允许你把一个应用程序作为静态页面导出。
在这节课中，我们将探讨这个特性。
让我们开始吧。
在这节课中，我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序。
(这是我们在之前的课程中创建的博客应用。)
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout static-blog-base
你可以执行以下命令：
npm install
npm run dev
现在，您可以通过导航到 http://localhost:3000/ 来访问该应用程序。
导出首页
现在，我们将导出首页(pages/index.js)作为一个静态HTML页面。
首先，创建一个名为 next.config.js 的文件，在你的应用程序的根目录，并添加以下内容:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}
然后将下面的NPM脚本添加到package.json中。
"scripts": {
"build": "next build",
"export": "next export"
}
然后运行以下命令:
npm run build
npm run export
现在，您可以在项目中看到一个名为“out”的目录中的导出的HTML内容。
这是一个功能齐全的静态网页应用，你可以把它部署到任何静态主机服务上，而且效果很好。
但在此之前，我们需要在本地测试它。
为了测试这款应用，请在全局安装 serve NPM模块:
npm install -g serve
“serve”是一个非常简单的静态web服务器。您也可以使用其他类似的工具。
但是为了让事情变得简单，使用 serve 在这一课中。
在安装了“serve”之后，可以从应用程序根下面运行以下命令:
cd out
serve -p 8080
现在，您可以使用:http://localhost:8080来访问您的静态应用程序。
一切都应该照常工作。
现在尝试访问这个页面:http://localhost:8080/p/hello-nextjs/
你如何描述输出?
只有首页
正如您所经历的那样，您将得到一个“Not Found”的页面作为内容。当你试图直接访问页面时，你会得到它。除了首页(/)，您还可以看到其他页面的相同行为。
这就是这里发生的事情:
您可以通过客户端访问所有页面，因为应用程序加载了相关的JavaScript内容。但是当您尝试直接加载它时，它就没有HTML内容可以使用。
那是因为我们只在Next.js导入出首页 index(/)的原因。
看看我们添加的配置:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}
导出其它页面
现在，让我们试着进出口和所有其他页面。
为此，向next.config.js文件 添加以下内容:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': { page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } }
}
}
}
正如上面的配置所示，/about 路径与 / 路径非常相似。但其他的则有些不同。
这里是这样的:
为了在我们的应用中呈现博客文章，我们有一个单独的页面叫做/post。我们通过查询字符串将不同的内容传递给该页面。
因此，在导出应用程序时，我们还需要提供这些查询字符串。
这就是我们用上面的配置来处理所有页面，从/p/开始。
现在关闭已经运行的应用程序，并在你的应用程序根中运行以下命令:
npm run build
npm run export
cd out
serve -p 8080
现在，您将能够访问以下页面而没有任何问题:
http://localhost:8080/p/learn-nextjs/
让我们做一个简单的任务。
在您的配置中添加以下内容:
'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }
我们的最终配置将是这样的:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': {page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } },
'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }
}
}
}
然后关闭当前的“serve”实例，并在应用程序根中运行以下命令:
npm run export
cd out
serve -p 8080
现在尝试访问这个页面:http://localhost:8080/p/exporting-pages/。
页面的输出是什么?
不需要总是构建
如您所见，我们可以访问页面而不会有任何问题。这个页面在/页面中是不可用的，但是我们可以为它生成静态HTML。
这是因为导出的HTML完全由我们添加到的配置控制 next.config.js.
为了导出该页面，这些是我们调用的命令:
npm run export
cd out
serve -p 8080
正如您所看到的，没有 npm run build 命令。这是为什么呢?
页面已经在那里了
next.js 在运行下一个导出命令时，js不会构建应用程序。在这种情况下，在构建中已经存在/post页面，并且不需要再次构建整个应用程序。
但如果我们对这款应用做了任何改动，我们就需要再次开发应用来获得这些变化。
部署应用程序
部署应用程序非常简单。只需访问“out”目录，并将其部署到您最喜欢的静态主机服务。
如果你现在用的是ZEIT now，这是如何做到的:
cd out
now
Paste_Image.png
就是这样
这都是关于next.js的静态HTML导出特性。你可以开发你的应用，通常是 next (也就是:npm run dev)，当你部署这个应用的时候，你可以把它导出为一个静态应用。
但是，如果您需要在部署应用程序后动态创建页面，那么这不是解决方案。
为此，您需要构建应用程序，并在开始时启动它，或者使用我们的programmatic API。
网友评论