网站的 URL 可以被认为是导航网站的指南针，它可以帮助用户快速找到他们想要的内容，更重要的是，它也能帮助网站在搜索结果中更好地排名。在 Next.js 中，我们可以很容易地使用路由功能来创建具有动态 URL 的页面。在本文中，我们将探讨如何使用 Next.js 实现根据 URL 动态加载页面的方法。
建立动态路由页面
我们可以通过创建一个新的 JavaScript 文件，在 pages 目录下创建动态路由页面。在文件名中使用方括号（[]）来指定路由参数。例如，如果我们想要创建一个动态路由页面，页面路径为 /posts/postid，那么我们可以创建一个名为 [postid].js 的文件。
-- -------------------- ---- ------- -- ----------------------- ------ - --------- - ---- -------------- -------- ------ - ----- ------ - ------------ ----- - ------ - - ------------- ------ --------- -------------- - ------ ------- -----
在这个例子中，我们使用了 next/router 模块，它是 Next.js 提供的一个帮助我们管理路由的工具。我们获取了路由对象上的 query 属性，然后从中提取出了 postid 属性。最后，我们将 postid 属性渲染为我们页面的主标题。
在这里，我们可以使用动态参数作为静态路径前缀。例如，我们可以用 /posts/[postid]/comment 这样的模式来创建另一个动态路由页面。
动态路由页面的数据获取
在动态路由页面中，我们的渲染内容需要根据实际的路由参数来动态生成。因此，我们需要在页面中获取这些参数，并根据这些参数获取相应的数据。在 Next.js 中，我们可以通过在页面组件中定义一个名为 getServerSideProps 的异步函数，来获取动态数据并在页面中使用。
-- -------------------- ---- -------
-- -----------------------
------ - --------- - ---- --------------
-------- ------ -------- -- -
----- ------ - ------------
----- - ------ - - -------------
------ -
--
-------------------------
-------------------------
---
--
-
------ ----- -------- -------------------- ------ -- -
----- --- - ----- ---------------------------------------------------------------------
----- -------- - ----- -----------
------ -
------ -
---------
--
--
-
------ ------- -----在这个例子中，我们使用了 getServerSideProps 函数，它可以从服务器端获取数据，并在页面组件中传递数据作为属性（props）。在此例中，我们获取了 postid 参数，并使用它来加载对应的帖子数据。我们通过使用 fetch API 与 JSONPlaceholder API 交互获取帖子数据。然后，我们将 postData 作为属性传递给我们的页面组件，并在渲染页面时显示相关的数据。
静态生成的动态路由
在某些情况下，我们可能希望在构建时生成一个具有动态路由的静态页面。例如，在我们和 CMS 集成时，可能希望预先生成一些内容页面。在 Next.js 中，我们可以在 getStaticPaths 函数中定义动态参数的范围，并根据这些参数生成静态页面。我们可以使用 [postid] 的动态参数作为静态路径前缀。
-- -------------------- ---- -------
-- -----------------------
------ - --------- - ---- --------------
-------- ------ -------- -- -
----- ------ - ------------
----- - ------ - - -------------
------ -
--
-------------------------
-------------------------
---
--
-
------ ----- -------- ---------------- -
----- ----- - -
- ------- - ------- --- - --
- ------- - ------- --- - --
- ------- - ------- --- - --
--
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ---------------------------------------------------------------------
----- -------- - ----- -----------
------ -
------ -
--------
-
--
-
------ ------- -----在本例中，我们显式声明了一个使用参数值为 1、2 和 3 的动态路由的页面。在这里，我们也定义了一个布尔类型的 fallback 属性，它用于指示在找不到页面时应该返回一个 404 页面还是等待静态页面生成。一个 fallback 属性为 true 的 getStaticPaths 函数将触发 Next.js 自动进行静态生成。但此方式不能实现根据 URL 动态加载页面，因此不在本文的讨论范围内。
总结
我们已经看到了如何使用 Next.js 的动态路由来创建具有动态 URL 的页面，并在页面中获取动态数据。我们还探讨了如何使用动态参数作为静态路径前缀，并在构建时生成静态页面。理解如何使用 Next.js 的路由功能，将使我们的网站更加易于使用和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64faaa97f6b2d6eab31858f3