dynamic URL with API paramethers - reactjs

Question

I'm new in nextjs and I need to do a dynamic URL using one API parameter
I have some like this data for the API
[
{
"categories" : {
"department": "HR"
"location": "xxxx"
},
"id": "4d2f341-k4kj6h7g-juh5v3",
},
{
"categories" : {
"department": "Operarions"
"location": "xxxx"
},
"id": "4qd3452-fsd34-jfd3453",
},
{
"categories" : {
"department": "Marketing"
"location": "xxxx"
},
"id": "4d2f341-k4kwer37g-juh5v3",
},
]
And I need to do something like that in my index.js
return(
<h1>More details</h1>
<a href="https://page.com/${id}"> link <a>
)
If someone can help me pls

Answer 1

Yes, will try to help you
Imagine you have a folder with the name records, so your url will be /records
In data you provided, you have several categories with ids which ones you like to have as links.(generated records dynamically)
According to nextjs docs, you can create getStaticProps page and generate static pages (it means it's very good for SEO, so use it on visible by SEO pages)
Imagine you have the next structure:
/records
[pid].tsx (or js)
index.tsx
This structure means that if you go to /records URL your index file will be triggered. And for /records/4d2f341-k4kj6h7g-juh5v3 your [pid] file will be triggered.
in index.tsx
import Link from 'next/link'
const Records= ({ records }) => {
return(
<div className="container">
<h1>Records</h1>
{records.map(record=> (
<div>
<Link href={'/records/' + record.id} key={record.id}>
<a>
{record.categories.department}
</a>
</Link>
</div>
))}
</div>
);
}
export const getServerSideProps = async () => {
//your API path here
const res = await fetch('replace_by_your_api_route');
const data = await res.json()
return {
props: {records: data}
}
}
export default Records
in your [pid].tsx
import GeneralUtils from "lib/generalUtils";
const RecordDetails= ({record}) => {
return(
<div>
{record?
<div >
{record.categories.department} {record.categories.location}
</div>
: ''}
</div>
)
}
export async function getStaticProps(context) {
const pid = context.params.pid;
//your api path to get each record where pid it is your parameter you are passssing to your api.
const res = await fetch(process.env.APIpath + '/api/public/getRecord?pid=' + (pid));
const data = await res.json();
return {
props: {record: data}
}
}
export async function getStaticPaths() {
const res = await fetch('your_api_path_same_as_in_index_tsx')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
//your id of each record, for example 4d2f341-k4kj6h7g-juh5v3
params: { pid: post.id.toString() },
}))
// We'll pre-render only these paths at build time.
// { fallback: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}
export default ProductDetails;
Output: - user types
/records - he will have list of recods with links
/records/4d2f341-k4kj6h7g-juh5v3 - he will have page with info of d2f341-k4kj6h7g-juh5v3
Check this info very carefully and this video