TypeScript - Next.js 动态路由

在搜索半天并测试后，我真的需要问一下。

我从 API 加载动态内容，从不知道有多少或是什么 ID。

我想为页面创建一个动态结构

'www.domain.com' 将加载首页

'www.domain.com/eth'，其中 eth 是查询参数 'chain' 并加载 [chain].tsx 页面。

'www.domain.com/eth/uni' 添加查询参数 'dex' 并加载 [chain][dex].tsx 页面。

'www.domain.com/eth/0xr83urt36sdt45t' 或者有一个查询参数 tokenAddress 并加载 [chain][tokenAddress].tsx 页面。

例如，我知道 dexscreener.com 正在做这个，但我无法弄清楚它是如何工作的。我正在使用带有 TypeScript 的 Next.js，并且我对两者都还比较新。

任何能指引我正确方向/文件夹结构等的人，那就太棒了。

答案＃1

这个问题有好几个层面：

1. 正在路由到 [链] 页面
2. 正在路由到 [chain][dex] 页面
3. 还匹配 [链][代币] 页面

这是通过此处概述的动态路由实现的

预定义路由优先于动态路由，动态路由优先于通配路由。看看以下例子：

pages/post/create.js - 将匹配 /post/create

pages/post/[pid].js - 将匹配 /post/1、/post/abc 等。但不匹配 /post/create

pages/post/[...slug].js - 将匹配 /post/1/2、/post/a/b/c 等。但不匹配 /post/create、/post/abc

同样，你可以首先静态定义 [chain] 路由。例如，如果你希望支持少量的链，你可以为该链路由（eth、sol 等）创建一个页面。这也可以通过 [chain] 模式动态实现（如示例 2 所示）。

然后，要将 [chain][dex/token] 匹配到相同的路由：可以通过使用 [...slug] 方法获取整个路由并解析出相关的 chain/dex/token，或者通过嵌套动态路由（更多信息见这个 SO 回答）来实现。两种方法都允许你使用上述模式匹配任何 [chain][dex/token] 模式的路由。通过这种方式，dex 和 token 模式都会以类似的方式进行路由（就像 dexscreener 所做的那样）。

一旦进入该路由，你可以使用 getStaticProps 或 getServerSideProps 来检查它是交易所还是代币（通过你自己的字典），并在页面上加载相应的内容。