在现代 Web 应用程序中，单页应用 (SPA) 已成为一种流行的趋势。然而，对于某些应用程序来说，多页应用 (MPA) 仍然是更好的选择。相对于单页应用，多页应用更易于理解、开发和维护。本文将介绍如何使用 Next.js 构建多页应用。
什么是 Next.js？
Next.js 是一个基于 React 的轻量级框架，用于构建服务端渲染的 React 应用程序。它提供了许多有用的功能，如自动代码分割、服务端渲染和静态导出等。这些功能使得 Next.js 成为构建多页应用的理想选择。
创建一个多页应用
首先，我们需要创建一个新的 Next.js 应用程序。可以使用以下命令安装 Next.js：
npm install next react react-dom
然后，创建一个名为 pages 的文件夹，用于存放多个页面组件。在 pages 文件夹中，创建两个页面组件 index.js 和 about.js：
-- -------------------- ---- ------- -- -------------- ------ ----- ---- -------- ----- --------- - -- -- - ------ --------- ---------- -- ------ ------- ---------- -- -------------- ------ ----- ---- -------- ----- --------- - -- -- - ------ --------- ---------- -- ------ ------- ----------
现在，我们可以使用以下命令启动 Next.js 应用程序：
npm run dev
访问 http://localhost:3000，你将看到 Index Page。访问 http://localhost:3000/about，你将看到 About Page。
创建一个导航栏
为了在多个页面之间导航，我们需要创建一个导航栏。可以在 pages 文件夹下创建一个名为 _app.js 的全局组件，并在其中添加导航栏：
-- -------------------- ---- -------
-- -------------
------ ----- ---- --------
------ ---- ---- ------------
----- ----- - -- ---------- --------- -- -- -
------ -
-----
-----
----
----
----- ---------
-----------
-------
-----
----
----- --------------
------------
-------
-----
-----
------
---------- -------------- --
------
--
--
------ ------- ------现在，我们可以在多个页面之间导航了。
创建一个动态路由
有时，我们需要使用动态路由来显示不同的内容。例如，我们可能需要显示不同的博客文章。可以在 pages 文件夹下创建一个名为 blog 的文件夹，并在其中创建一个名为 [slug].js 的页面组件：
-- -------------------- ---- ------- -- -------------------- ------ ----- ---- -------- ------ - --------- - ---- -------------- ----- -------- - -- -- - ----- ------ - ------------ ----- - ---- - - ------------- ------ ---------------- -- ------ ------- ---------
现在，当你访问 http://localhost:3000/blog/hello-world 时，你将看到 hello-world。
创建一个自定义页面
有时，我们需要创建一个自定义页面来显示不同的内容。可以在 pages 文件夹下创建一个名为 custom 的文件夹，并在其中创建一个名为 [page].js 的页面组件：
-- -------------------- ---- ------- -- ---------------------- ------ ----- ---- -------- ------ - --------- - ---- -------------- ----- ---------- - -- -- - ----- ------ - ------------ ----- - ---- - - ------------- ------ ---------------- -- ------ ------- -----------
现在，当你访问 http://localhost:3000/custom/about 时，你将看到 about。
结论
在本文中，我们介绍了如何使用 Next.js 构建多页应用。我们创建了多个页面组件、导航栏、动态路由和自定义页面。这些示例代码可以帮助你开始构建自己的多页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6745294cc1a23897ea8ae6f3