Next.js 是一个基于 React 的服务端渲染框架，它提供了很多便捷的特性，比如自动代码分割、静态导出、服务端渲染等。在实际应用中，我们经常需要实现一些复杂的页面结构，比如 tab 页面或者 spa app，本文将介绍如何用 Next.js 实现这些功能。
实现 tab 页面
tab 页面是指一个页面中有多个 tab，每个 tab 对应不同的内容。在传统的前端应用中，我们可以通过切换显示和隐藏不同的 DOM 元素来实现 tab 页面。在 Next.js 中，我们可以利用路由来实现 tab 页面。
首先，我们需要在 pages 目录下创建一个目录，比如叫做 tabs，然后在该目录下创建多个页面文件，比如 tabs.js、tabs/first.js、tabs/second.js 等。tabs.js 文件是整个页面的入口文件，它会渲染一个顶部的 tab 栏和一个下面的内容区域。first.js 和 second.js 分别对应两个 tab 的内容。
-- -------------
------ ---- ---- ------------
------ - --------- - ---- --------------
----- ---- - -
- ----- -------- ---- ------------- --
- ----- --------- ---- -------------- --
--
------ ------- -------- ------ -
----- ------ - ------------
----- - -------- - - -------
------ -
-----
-----
--------------- -- -
----- ------------- ---------------
-- ------------------- --- ------- - -------- - ------------------
-------
---
------
------
---
-- ----------- ---------
------------------
---
---------------- --- ------------- -- ------ ---
---------------- --- -------------- -- ------- ---
-------
------
--
-
-------- ------- -
------ ---------- --- --------------
-
-------- -------- -
------ ----------- --- --------------
-在上面的代码中，我们通过 useRouter() 钩子获取当前路由信息，并根据路由信息渲染不同的页面组件。当用户点击不同的 tab 时，会自动切换路由，然后重新渲染页面。
实现 spa app
spa（Single Page Application）是指一个页面内包含多个组件，用户可以在不刷新整个页面的情况下切换不同的组件。在传统的前端应用中，我们可以通过前端路由和组件化架构来实现 spa。在 Next.js 中，我们可以利用它的自动代码分割和路由功能来实现 spa。
首先，我们需要在 pages 目录下创建多个页面文件，比如 index.js、about.js、contact.js 等。这些页面文件会被 Next.js 自动代码分割为多个组件，然后根据访问路径自动渲染不同的组件。
-- --------------
------ ---- ---- ------------
------ ------- -------- ------ -
------ -
-----
-----
----- ---------------------------
----- ---------------------------------
----- -------------------------------------
------
------
----------- -- -- -------------
------- --- --- ---- ---- ----------- ----- -- --- -- ---------
-------
------
--
-
-- --------------
------ ---- ---- ------------
------ ------- -------- ------- -
------ -
-----
-----
----- ---------------------------
----- ---------------------------------
----- -------------------------------------
------
------
--------- -------
------ - --- --------- ----- -- --- ---------
-------
------
--
-
-- ----------------
------ ---- ---- ------------
------ ------- -------- --------- -
------ -
-----
-----
----- ---------------------------
----- ---------------------------------
----- -------------------------------------
------
------
----------- -------
------ --- ----- -- -- --------------------
-------
------
--
-在上面的代码中，我们使用了 Link 组件来实现前端路由，用户点击不同的链接时，会自动切换路由，然后重新渲染页面。
总结
通过本文的介绍，我们了解了如何用 Next.js 实现 tab 页面和 spa app。在实际应用中，我们可以根据业务需求来选择不同的方案。如果页面结构比较简单，可以使用 tab 页面；如果页面结构比较复杂，可以使用 spa app。Next.js 提供了很多便捷的特性，让我们可以快速开发出高性能的前端应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6602a128d10417a222e76053