Fetch data using an id from an api but display an alternative text to address bar e.g. content_title in Next.js

[ItsCosmas]

I'm using an api that only allows fetching data using an id BUT NOT title as follows http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8 . The endpoint returns a JSON object which I want to render to browser using Next Js. However I want to have a clean url architecture that contains title as follows:

instead of a url containing the id as follows:

Here's how I'm passing props to 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>

and here's is my [id].js file:

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 () => {
	const res = await getBlog(`${router.query.id}`);
	const json = await res.json();
	console.log(json);

	return { blog: json };
};

export default Article;

I get a router not defined error trying to access it in getInitialProps. I also understand it does not pass the id as I intend.
Is it possible to achieve this? and how can I achieve it using dynamic links in Next.js ?

[willemliu]

Have you tried changing the href to the URL with the ID?

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

[ItsCosmas]

Yeah and still that doesn't pass the id parameter to the Post Component where I'll need it again.

import React from 'react';
import { useRouter } from 'next/router';
import ArticleView from '../../components/ArticleView';

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

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

	return (
		<div class='article'>
			<div class='article__main'>
                                // Logging the router.query.id here it seems to be passing the name instead of the id
				{console.log(router)}
				<ArticleView />
			</div>
		</div>
	);
};

Article.getInitialProps = async () => {
        // This line here raises an error since the router cannot be accessed here inside getInitialProps
	const res = await getBlog(`${router.query.id}`);
	const json = await res.json();
	console.log(json);

	return { blog: json };
};

export default Article;

[willemliu]

My example was wrong in the first place. Href should point to the file on the file-system. In your case: /pages/[id] because your file is named /post/[id].js. However if you do that then you'd have to change as to /post/13b03a39-bc04-4604-baf6-059658f9f5e8. But that's not what you want.
The only solution I can think of now is to configure routes in now.json if you deployed it to now to use regex matching to do the rewriting. Or use the experimental rewrites of next.config.js to achieve the same thing.

[willemliu]

The problem lies a bit deeper. The user eventually lands on a pretty URL through the usage of your Link component. However what will happen if the user does a browser reload on that pretty URL? All the information regarding the post is gone.

[willemliu]

Either the ID needs to be incorporated within the URL somewhere so a browser reload will still send the relevant information to the server so the correct post can be fetched and rendered.

[ItsCosmas]

OKay, let me see if this suggestion actually works. Might be a long road but I'll try it

My example was wrong in the first place. Href should point to the file on the file-system. In your case: /pages/[id] because your file is named /post/[id].js. However if you do that then you'd have to change as to /post/13b03a39-bc04-4604-baf6-059658f9f5e8. But that's not what you want.
The only solution I can think of now is to configure routes in now.json if you deployed it to now to use regex matching to do the rewriting. Or use the experimental rewrites of next.config.js to achieve the same thing.

[ItsCosmas]

The problem lies a bit deeper. The user eventually lands on a pretty URL through the usage of your Link component. However what will happen if the user does a browser reload on that pretty URL? All the information regarding the post is gone.

I see clearly this will be a deal breaker, thanks fro the heads up. Eventually I may have to settle down on id url or either ask the backend team to allow getting post by title

[willemliu]

Yeah and fetching by title will be very hard as every title needs to match uniquely to an ID. The easiest solution is to expose the blog id somewhere in the URL.

[willemliu]

/post/:id/:title

[ItsCosmas]

/post/:id/:title

Our id's are pretty lengthy, this will give us some really lengthy and ugly urls. But We'll see how it goes. 👊🏾

[willemliu]

Here is a little demo which implemented routes: https://next-routes.willemliu.now.sh/
It show-cases two methods:

• dynamic route segments
• rewrites in next.config.js

Source: https://github.com/willemliu/next-routes