随着前端技术的不断发展，越来越多的应用需要支持多页面，特别是企业级应用。Next.js 是一个基于 React 的同构框架，可以帮助开发者轻松构建多页面应用。
本文将介绍如何使用 Next.js 实现多页面应用，包括路由配置、页面组件的编写和数据的获取。
路由配置
在 Next.js 中，路由是非常重要的，因为它能够决定程序的页面切换。默认情况下，Next.js 使用基于文件系统的路由系统。也就是说，你可以直接在 pages 目录中创建一个文件，它就是一个页面。文件名就是页面的 URL。
例如，你可以在 pages 目录中创建一个 about.js 文件，它就对应着 URL /about。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ------- -------- ------- -
------ -
-----
--------------
------- -- ----- ---------
------
--
-你还可以在 pages 目录中创建一个目录，这个目录下的每个文件都是这个页面的子页面。例如：
pages/ ├── about │ ├── index.js // /about │ ├── team.js // /about/team │ └── history.js // /about/history ├── index.js // / └── contact.js // /contact
页面组件
页面组件是 Next.js 应用的核心。一个页面组件就是一个 React 组件，它接收一些属性（props），并返回一个 JSX 元素。
页面组件可以在 views 目录下编写。每个页面组件都必须导出一个函数，并接收一个 context 对象作为它的参数。该函数的返回值是一个组件。
例如：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ------- -------- ------- ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
-- --------------------
------ ----- ---- ----------
------ ------- -------- ------------ -
------ -
------
-------------
------------- -- ----- ------
--
--
-数据获取
在 Next.js 中，数据获取是一个非常重要的问题。因为多页面应用需要获取不同的数据。Next.js 提供了 getStaticProps 和 getServerSideProps 两个 API，用于获取数据。
getStaticProps
getStaticProps 是一个静态生成函数，它用于在构建时获取数据。这种方式适用于需要获取的数据不频繁更新的情况。
例如，你可以在 About 组件中使用 getStaticProps 获取数据：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ------- -------- ------- ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- ---------------- -
-- ----
----- ---- - -
------ --------
-------- ----- -- ----- -------
--
------ -
------ -----
--
-getServerSideProps
getServerSideProps 是一个服务器端渲染函数，它用于在每个请求时获取数据。这种方式适用于需要获取的数据频繁更新的情况。
例如，你可以在 Contact 组件中使用 getServerSideProps 获取数据：
-- -------------------- ---- -------
-- ----------------
------ ----- ---- --------
------ ------- -------- --------- ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- -------------------- -
-- ----
----- ---- - -
------ ----------
-------- ----- -- ------- -------
--
------ -
------ -----
--
-示例代码
最后，我们提供一个完整的示例代码，包括路由配置、页面组件和数据获取：
-- -------------------- ---- -------
-- ------
------ ---------- ---- -----------------------
------ ---- ---- ----------------------
------ ------- ---- -------------------------
------ ------- ---- -------------------
------ ------- -------- ------ -
------ -
-----
-------------
----
------ ----------------------------
----
------ --------------------------------
------ --------------------------------------
-----
------ --------------------------------
-----
------
--
-
-- --------------
------ ----- ---- --------
------ ------- -------- ------- ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- ---------------- -
-- ----
----- ---- - -
------ --------
-------- ----- -- ----- -------
--
------ -
------ -----
--
-
-- --------------------
------ ----- ---- ----------
------ ------- -------- ------------ -
------ -
------
-------------
------------- -- ----- ------
--
--
-
-- -------------------
------ ----- ---- ----------
------ ------- -------- ------ -
------ -
------
------------
------------- -- ----- ---- ------
--
--
-
-- ----------------------
------ ----- ---- ----------
------ ------- -------- --------- -
------ -
------
---------------
------------- -- ----- ------- ------
--
--
-
-- ----------------
------ ----- ---- --------
------ ------- -------- --------- ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- -------------------- -
-- ----
----- ---- - -
------ ----------
-------- ----- -- ------- -------
--
------ -
------ -----
--
-总结
本文介绍了如何使用 Next.js 实现多页面应用。我们从路由配置、页面组件和数据获取三个方面入手，详细讲解了 Next.js 中的核心概念和 API，希望读者能够从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a8d261add4f0e0ff20b6a2