前端开发中，单页应用已经成为了一个非常流行的选择。然而，在某些场景下，多页应用 (MPA) 仍然是一个必要的选择，例如：SEO 需求强、页面间逻辑分离等等。本文将主要介绍如何使用 Next.js 框架搭建一个基于多页应用的项目。
什么是 Next.js
Next.js 是一个 React 框架，提供了一系列用于服务器渲染的工具。在 Next.js 中，一个页面是由一个或多个 React 组件组合而成，并由服务器端进行渲染。除此之外，它提供了许多处理常见问题的功能，例如：自动代码分割、自动服务端渲染、静态文件服务等等。因此，使用 Next.js 搭建多页应用具备了极高的效率。
Next.js 搭建 MPA
Next.js 提供了一种方式来创建多个页面应用程序。该方式需要你在 pages 目录下创建一系列文件或子目录。例如：
pages/ --| index.js --| about.js --| contact.js
此时，我们已经完成了一个简单的多页应用。当通过域名访问到这些页面时，Next.js 会自动根据文件名匹配对应的页面进行渲染。例如，访问到 http://localhost/ 时，会对应着 pages 目录下的 index.js 文件。
下面是一个简单的示例代码：
-- -------------------- ---- -------
-- --------------
------ ---- ---- -----------
------ ---- ---- -----------
------ ------- -------- ---- -- -
------ -
--
------
----------- ------------
-------
---------- -----------
----- --------------
-------- ------
-------
---
-
-通过上面的示例代码，我们可以发现 Next.js 的开发十分简单，可以非常快速地实现多页应用。
针对 MPA 的问题
在多页应用开发中，我们经常会遇到一些问题。Next.js 针对这类问题也提供了一些解决方案。
公用部分组件复用问题
当一个网站需要多个页面时，其中一些组件可能会在多个页面上使用。因此，代码应尽可能少地重复。Next.js 中可以通过 _app.js 文件来实现公用组件，该文件是所有页面共享的。
import App from 'next/app'
function MyApp ({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp资源共享问题
在传统的多页应用程序中，我们通常需要在每个页面上加载完整的样式和脚本文件。但是，使用 Next.js 后，我们只需要将这些文件放在 public 目录中，Next.js 会自动将这些文件提供静态服务，做到了只加载一次。
例如，我们将样式文件放在 public/styles.css 内，然后在页面中通过以下方式加载：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ----- -- -
------ -
--
------
----- ---------------- ------------------ --
-------
---------- --------
---
-
-这样，Next.js 会自动将 styles.css 提供为静态目录服务，只会在第一次加载页面时加载。
总结
本文介绍了如何使用 Next.js 搭建一个多页应用 (MPA)。在 Next.js 中，我们可以非常方便地实现多页应用程序，并且 Next.js 对于多页应用程序中的一些问题，也提供了一些解决方案。这使得使用 Next.js 进行 MPA 开发变得非常便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f15784f6b2d6eab3b2f11e