前端早报：最新版本 Next.js 的静态站点生成 API
近年来，静态网站生成器（Static Site Generator）越来越受到开发者的欢迎。而 Next.js 作为一个基于 React 的优秀框架，在静态站点生成方面也有着出色的表现。在最新版本 Next.js 9.3 中，官方提出了全新的静态站点生成 API，让我们可以更加方便地生成静态页面。
在传统 Next.js 中，生成静态内容的方式很简单，只需要在getInitialProps()函数中返回数据并写入到组件中即可，如下所示：
-- -------------------- ---- -------
------ ----- ----------------- -
----- --- - ----- ------------------------------------
----- ---- - ----- ----------
------ - ---- -
-
-------- ------------------ -
------ -
-----
-------------------- -- -
---- --------------------------------
---
------
-
-但是，这种方式有一个显而易见的缺点：需要在服务器上动态生成页面。而最新版本中的静态站点生成 API 则可以不需要借助服务器生成静态页面，只需要在项目根目录下创建next.config.js文件，然后将target: 'serverless'设为true即可启用静态站点生成。示例代码如下：
-- -------------------- ---- -------
-- --------------
-------------- - -
------- ------------- -- --------
-------------------- ----- -- -- --- -----
-------------- ----- -- -- -
----- ----- - -
---- - ----- --- --
--------- - ----- -------- --
-
-- --------
----- --- - ----- ------------------------------------
----- ---- - ----- ----------
----------------- -- -
--------------- - -------- - -
----- --------------
------ - --- ------- -
-
--
------ -----
--
-如上所示，在exportsPathMap()函数中，我们可以结合后端数据生成相应的页面，并将其添加到返回的pages对象中。这种方式既灵活又高效，相比原来的方法具有显著的优势。现在再来看一下如何在组件中使用生成的静态页面。将之前的组件代码修改如下：
-- -------------------- ---- -------
-------- ------------------ -
------ -
-----
--------------------- -- -
----- -------------------------- --------------
-------------------
-------
---
------
-
-在使用 Link 进行路由跳转时，需要将 href 属性设为生成的静态页面路径即可。这样一来，我们就可以完成静态站点生成的全部过程了。需要注意的是，启用静态站点生成之后，所有的静态文件都会被导出到out目录中，因此需要将静态文件引用做出相应的修改。
总结
通过本文的介绍，我们了解了 Next.js 最新版本的静态站点生成 API。与传统的方式不同，这种方式可以在不依赖于服务器的情况下动态生成静态页面，既方便又高效，给开发者带来了极大的便利。当然，在实际使用中还需要考虑到一些细节问题，比如静态文件的引用等。但是，总的来说，静态站点生成 API 的推出为我们带来了更多的选择，也为前端开发工作带来了新的思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64708282968c7c53b0ea4147