使用 api 中的 id 获取数据，但在地址栏显示替代文本，例如 Next.js 中的 content_title

Question

我使用的 api 只允许使用id获取数据 ，但不允许 使用标题，如下所示http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8。端点返回一个 JSON 对象，我想使用 Next Js 将其渲染到浏览器。但是我想要一个干净的 url 架构，其中包含标题，如下所示：

而不是包含 id 的 url，如下所示：

这是我要传递的props方式Link：

<Link
    href={`/post/${post.blog_title}`}
    as={`/post/${post.blog_title}`}>
    
    <a className='blog__card--link'>
        <h4 className='blog__card--title'>{post.blog_title}</h4>
    </a>
</Link>

这是我的[id].js文件：

import { getBlog } from '../../api/index';

const Article = ({ blog }) => {
    const router = useRouter();

    return (
        <div class='article'>
            <div class='article__main'>
                {/* {console.log(router)} */}
                <ArticleView />
            </div>
        </div>
    );
};

Article.getInitialProps = async (router) => {
    const res = await getBlog(`${router.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};

export default Article;

尝试访问${router.query.id}它getInitialProps会返回我理解的标题，这就是我正在经过的标题as prop in Link。

是否有可能实现一个干净的 url 结构，但也可以id使用getInitialProps？如何使用 Next.js 中的动态链接来实现它？

重要更新

-> 唯一好的替代方案是在 API 中使用 slugs，因为想象一下有人从另一个站点点击链接到您的帖子，或者可能在浏览器地址栏中输入 URL？您如何知道要从后端查询什么？因此，这个问题来自于不切实际的地方，为了将来其他人的利益而选择将其保留在网站上。

Answer 1

我在这个问题中试图实现的目标是不切实际的，因此我决定在后端使用独特的 slugs，可用于获取特定数据。

假设您的文章/帖子的链接在其他地方共享，那么获取该帖子/文章的数据的唯一方法就是使用 slug。