js导出.html文件,十、Next.js，导出静态HTML应用程序

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

部署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

导出首页

现在，我们将导出首页(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来访问您的静态应用程序。

一切都应该照常工作。

你如何描述输出?

只有首页

正如您所经历的那样，您将得到一个“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

现在，您将能够访问以下页面而没有任何问题:

让我们做一个简单的任务。

在您的配置中添加以下内容:

'/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

不需要总是构建

如您所见，我们可以访问页面而不会有任何问题。这个页面在/页面中是不可用的，但是我们可以为它生成静态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。