Next.js 提供了强大的动态路由功能，允许开发者根据 URL 的不同部分来渲染不同的页面。这使得应用能够更加灵活地处理各种请求。
动态路由的基本概念
在 Next.js 中，动态路由是通过在文件名中使用方括号 [] 来实现的。例如，如果你想要创建一个可以处理 /posts/1、/posts/2 等 URL 的页面，你需要创建一个名为 pages/posts/[id].js 的文件。这个文件将会匹配所有以 /posts/ 开头并且后面跟着任意 ID 的 URL。
创建动态路由
假设我们有一个博客应用，并且希望用户可以通过访问类似 /post/:postId 的 URL 来查看特定的文章。为了实现这一点，我们首先需要创建相应的动态路由文件。
步骤 1: 创建动态路由文件
在 pages 目录下创建一个名为 post/[postId].js 的文件。这个文件将负责处理所有带有 postId 参数的 URL。
-- -------------------- ---- -------
-- ----------------------
------ - --------- - ---- --------------
------ ------- -------- ------ -
----- ------ - ------------
----- - ------ - - -------------
------ -
-----
--------------------
------
--
-在这个例子中，我们从 router.query 中获取 postId 参数，并将其显示在页面上。
使用 getStaticProps 和 getServerSideProps
对于静态生成和服务器端渲染，Next.js 提供了 getStaticProps 和 getServerSideProps 方法来预取数据。这些方法可以在动态路由文件中使用。
使用 getStaticProps 静态生成
如果你知道所有可能的 postId 值，并且这些值不会经常改变，你可以使用 getStaticProps 来预先生成这些页面的数据。
-- -------------------- ---- -------
-- ----------------------
------ ----- -------- ---------------- -
-- ---------------------- -------- --
------ -
------ -
- ------- - ------- --- - --
- ------- - ------- --- - -
--
--------- ----- -- ----- ------------------- --- -------- --------------------------
--
-
------ ----- -------- ----------------------- -
----- - ------ - - ---------------
-- ------ --- ----------------
----- ---- - ----- ------------------------------------------------------
----- ---- - ----- ------------
------ -
------ -
----
-
--
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-使用 getServerSideProps 服务器端渲染
如果你的应用需要根据每次请求的不同来动态获取数据，那么应该使用 getServerSideProps。
-- -------------------- ---- -------
-- ----------------------
------ ----- -------- --------------------------- -
----- - ------ - - ---------------
----- ---- - ----- ------------------------------------------------------
----- ---- - ----- ------------
------ -
------ -
----
-
--
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-路由重定向和错误处理
除了基本的动态路由之外，Next.js 还提供了路由重定向和错误处理的功能，使得应用的导航更加友好。
路由重定向
在某些情况下，你可能需要将用户从一个 URL 重定向到另一个 URL。这可以通过在 getServerSideProps 或 getStaticProps 函数中返回一个 redirect 对象来实现。
-- -------------------- ---- -------
-- ----------------------
------ ----- -------- --------------------------- -
----- - ------ - - ---------------
-- ------- --- ---- -
-- ------- ---------------
------ -
--------- -
------------ ------------------
---------- ------
--
--
-
----- ---- - ----- ------------------------------------------------------
----- ---- - ----- ------------
------ -
------ -
----
-
--
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-错误处理
在动态路由中处理错误也很重要。你可以通过在页面组件中捕获错误，或者通过 getInitialProps 或 getServerSideProps 返回错误对象来实现。
-- -------------------- ---- -------
-- ----------------------
------ ----- -------- --------------------------- -
----- - ------ - - ---------------
--- -
----- ---- - ----- ------------------------------------------------------
-- ---------- ----- --- ----------------
----- ---- - ----- ------------
------ -
------ -
----
-
--
- ----- ------- -
------ -
--------- ----- -- -- --- --
--
-
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-通过以上步骤，我们可以看到如何在 Next.js 应用中有效地使用动态路由，并结合不同的数据获取策略来提升用户体验。