Next.js 是一款基于 React 的服务端渲染应用框架，它拥有自动代码分割、服务器渲染、静态导出等特性，可以帮助我们构建高性能、易于开发和优化的 Web 应用程序。在多页面应用中，有些组件是需要被多个页面共享的，例如导航栏、页脚、侧边栏等，这时我们可以使用 Next.js 提供的多种方式来实现多页面共享组件。
方式一：Layout 组件封装
通常情况下，我们可以将整个页面的布局放在一个 Layout 组件中，然后在每个页面中引用它，这样就可以实现多个页面共享同一个布局：
-- -------------------- ---- -------
-- ---------
----- ------ - -- -------- -- -- -
------ -
--
--------------
-----------------------
-------------------
---
-
-
------ ------- --------- -------------------- ---- -------
-- --------
------ ------ ---- -----------------------
----- ----- - -- -- -
------ -
--------
--------------
---------
-
-
------ ------- -------- -------------------- ---- -------
-- --------
------ ------ ---- -----------------------
----- ----- - -- -- -
------ -
--------
--------------
---------
-
-
------ ------- ------如果我们要为每个页面添加不同的 title 和 meta 标签，可以使用 Next.js 的 Head 组件，在每个页面中动态修改。
-- -------------------- ---- -------
-- ---------
------ ---- ---- ------------
----- ------ - -- --------- ----- - ------ -- -- -
------ -
--
------
----------------------
----- --------------- ---------------------------- ------------------ --
----- ------------------ -------------- --
-------
--------------
-----------------------
-------------------
---
-
-
------ ------- --------- -------------------- ---- -------
-- --------
------ ------ ---- -----------------------
----- ----- - -- -- -
------ -
------- --------------
--------------
---------
-
-
------ ------- ------方式二：公共页面
除了使用 Layout 组件来实现页面布局共享，还可以使用 Next.js 提供的公共页面（Common Page）来实现复用。公共页面是一种在多个页面中复用同一组件的方式，例如我们可以将一个导航栏组件封装在单独的导航栏页面中，然后在需要使用的页面中进行引用。
首先，在页面中引用公共页面组件：
-- -------------------- ---- -------
-- --------
------ --- ---- --------------------
----- ----- - -- -- -
------ -
--
---- --
--------------
---
-
-
------ ------- ------接着，在 /pages 目录下创建一个 /_shared 目录，并在其中创建 nav.js 文件：
-- -------------------- ---- -------
-- ---------------------
------ ---- ---- ------------
----- --- - -- -- -
------ -
-----
----- --------------------------
----- --------------------------
------
-
-
------ ------- ----公共页面的命名必须以下划线 _ 开头，其中的组件会被 Next.js 所特殊处理。在页面中的路径中使用 /_shared/nav 就能够引用到公共页面组件了。
方式三：动态导入组件
使用 Layout 组件和公共页面都可以实现组件的复用，但有时这些组件不是在每个页面都被引用，而是根据实际需要动态加载。在这种情况下，我们可以使用 Next.js 的动态导入（Dynamic Imports）来实现组件的按需加载。
以 React.lazy() 为例，例如下面这个示例代码：
-- -------------------- ---- -------
-- --------
------ ------- ---- ---------------
----- ----- - -- -- -
----- ------ - ---------- -- --------------------------------
------ -
--
------- --
--------------
---
-
-
------ ------- -------- -------------------- ---- -------
-- --------------------
----- ------ - -- -- -
------ -
--------
---------------
---------
-
-
------ ------- -------以上示例代码中，Header 组件会在需要的时候被动态地导入，而不是在应用程序加载时一次性下载所有代码。
总结
Next.js 提供了多种方式来实现多页面共享组件，包括 Layout 组件、公共页面以及动态导入组件等。我们应该根据具体情况选择适合的方式来优化我们的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5a6b4f6b2d6eab3e76faa