在 Next.js 中，我们可以使用 Layout 组件为应用程序添加一致的布局。一个常见的应用布局是具有不同种类页面的混合应用程序，例如用户的登录页面、仪表板页面和管理员的控制面板等。
在这种情况下，我们需要为每个页面提供其自己的布局。在 Next.js 中，我们可以通过自定义 _app.js，创建多个 Layout 组件来实现这个目的。
创建多个 Layout 组件
我们先来创建三个布局组件，分别是 LoginLayout、DashboardLayout 和 AdminLayout。
LoginLayout：
const LoginLayout = ({ children }) => (
<div>
<h1>登录</h1>
{children}
</div>
);
export default LoginLayout;我们可以看到，这个组件只包含了一个 h1 标签和接收 children props 的
DashboardLayout：
-- -------------------- ---- -------
----- --------------- - -- -------- -- -- -
-----
------------
-----
----
----
-- -----------------
-----
-----
------
----------
------
--
------ ------- ----------------这个布局添加了一个导航栏来让用户能够导航到应用的其他部分。
AdminLayout：
-- -------------------- ---- -------
----- ----------- - -- -------- -- -- -
-----
-------------
-----
----
----
-- -----------------
-----
----
-- -------------------------
-----
-----
------
----------
------
--
------ ------- ------------这个布局与我们的 DashboardLayout 有些相似，只不过它添加了更多的主导航菜单，让管理员能够访问他们的控制面板。
现在我们已经创建了三个 Layout 组件，我们要如何使用他们？
使用多个 Layout 组件
在我们的 Next.js 应用程序中，我们需要使用我们新创建的 Layout 组件来呈现特定页面的 UI。
为了使用这些布局，我们要做的是在 pages 文件夹中为每个页面创建一个自定义的 _app.js 文件，然后将指定的布局传递给子组件。
例如：为了使用 LoginLayout 布局，我们需要创建一个自定义的 _app.js 文件，然后在该组件中渲染 LoginLayout 组件。
-- -------------------- ---- -------
------ ----------- ---- ------------------------------------
-------- ------- ---------- --------- -- -
------ -
-------------
---------- -------------- --
--------------
--
-
------ ------- ------通过这种方式，我们可以很容易地为我们的页面切换布局，而不必修改每个页面的样式或布局。
示例代码
此 demo 应用程序包括三个页面（登录、仪表板和管理员控制面板），并使用上面定义的 LoginLayout、DashboardLayout 和 AdminLayout 布局组件。
/pages/_app.js
-- -------------------- ---- -------
------ ----------- ---- ------------------------------------
-------- ------- ---------- --------- -- -
------ -
-------------
---------- -------------- --
--------------
--
-
------ ------- ------/pages/login.js
-- -------------------- ---- -------
------ ---- ---- ------------
------ ----- ---- ----------------------
-------- ---------------- -
------ -
--
------
-----------------
-------
------ --
---
--
-
------ ------- ----------/components/layouts/LoginLayout.js
const LoginLayout = ({ children }) => (
<div>
<h1>登录</h1>
{children}
</div>
);
export default LoginLayout;/pages/dashboard.js
-- -------------------- ---- -------
------ ---- ---- ------------
------ --------- ---- --------------------------
------ --------------- ---- ----------------------------------------
-------- -------------------- -
------ -
--
------
------------------
-------
---------- --
---
--
-
-------------------- - ----------------
------ ------- --------------/components/layouts/DashboardLayout.js
-- -------------------- ---- -------
----- --------------- - -- -------- -- -- -
-----
------------
-----
----
----
-- -----------------
-----
-----
------
----------
------
--
------ ------- ----------------/pages/admin.js
-- -------------------- ---- -------
------ ---- ---- ------------
------ -------------- ---- -------------------------------
------ ----------- ---- ------------------------------------
-------- ---------------- -
------ -
--
------
----------------------
-------
--------------- --
---
--
-
---------------- - ------------
------ ------- ----------/components/layouts/AdminLayout.js
-- -------------------- ---- -------
----- ----------- - -- -------- -- -- -
-----
----------------
-----
----
----
-- -----------------
-----
----
-- -------------------------
-----
-----
------
----------
------
--
------ ------- ------------结论
在本篇文章中，我们讲解了如何在 Next.js 应用程序中添加多个布局，以便为混合应用程序提供一致的 UI。我们学习了如何创建自定义的 _app.js 文件，并如何在其中为每个页面分配布局组件。
希望本文对于那些使用 Next.js 开发复杂应用程序的开发者来说，提供了一个宝贵的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b92afd91dce0dc88b562e