Nextjs passing ids to through link

I’ve created a component named ArticleList this component’s purpose is to display a list of articles that are returning from an API. When clicking on the article title it will redirect to that individual page which I’ll then fetch data for. The API used needs an article id parameter which I have access on the ArticleList component. I am having issues passing this id to the [...blog] page I created.

How can I redirect to this dynamic blog page without passing the ID in the URL? If I’d like to show the id in the URL then I would not have any issues as I can access it from next.js router but because I do not want it in the URL I am having issues with coming up with an alternative working way.

I’ve attempted to do some research if possible, to hide the query strings in the URL when on the page but based on my research that does not look like it is possible in next.js. Also based on my research there is no next/Link property I can use to pass this without displaying it in the URL.
The code snippet I am having issues with is:

 <Link href={`/blog/${ConvertCodeTitleToURL(d.name)}`}>
      <a className="text-body-black font-weight-500 letter-spacing-15 text-20 m-b-8">
          {article.title}
         </a>
   </Link>

Here is an example of the ArticleList component:

import Image from "next/image";
import Link from "next/link";

function ConvertCodeTitleToURL(title) {
  let url = "";

  if (title) {
    url = title.replace(".", "").toLowerCase();
    url = url.replace(/,/g, "");
    url = url.replace("(", ""); // added for (except) cases
    url = url.replace(/s/g, "-");
  } else {
    url = "/";
  }

  return url;
}

const ArticleList = ({ categories, articles }) => {
  let combinbedarr = categories.results.map((item, i) =>
    Object.assign({}, item, articles[i])
  );

  return (
    <div className="container-1200">
      {combinbedarr &&
        combinbedarr.map((d) => (
          <>
            {d.results.length > 0 && (
              <div key={d.id}>
                <div className="d-flex justify-space-between">
                  <div className="heading-30 letter-spacing-25 text-dark-blue m-l-n-20">
                    {d.name}
                  </div>
                  <Link
                    href={`/categories/${ConvertCodeTitleToURL(d.name)}/?id=${
                      d.id
                    }`}
                  >
                    <a className="text-16 font-weight-500 letter-spacing-25 text-blue m-r-120">
                      All {d.name} <i className="fas fa-arrow-right"></i>{" "}
                    </a>
                  </Link>
                </div>
                <div className="d-flex align-center m-b-32 flex-wrap">
                  {d.results &&
                    d.results.map((article) => (
                      <>
                        <div className="m-r-32 card-resources">
                          <div
                            key={article.id}
                            className="m-b-20 ct-relative card-resources-img m-b-20"
                          >
                            <img
                              className="div-100"
                              alt=""
                              layout="responsive"
                              height="180"
                              src={`test.api.com/${article.seoImageUrl}`}
                            />
                          </div>

                          <div className="article-content">
                            <Link
                              href={`/blog/${ConvertCodeTitleToURL(d.name)}`}
                            >
                              <a className="text-body-black font-weight-500 letter-spacing-15 text-20 m-b-8">
                                {article.title}
                              </a>
                            </Link>
                            <div className="m-b-20">
                              {article.seoDescription}
                            </div>
                            <div className="d-flex m-b-20">
                              {article.tags &&
                                article.tags.map((tag) => (
                                  <div className="ct-topics" key={tag}>
                                    {tag}
                                  </div>
                                ))}
                            </div>
                          </div>
                        </div>
                      </>
                    ))}
                </div>
              </div>
            )}
          </>
        ))}
    </div>
  );
};
export default ArticleList;

[...blog] page that I would like to have access to the id

const blog = () => { 
    // logic to fetch article data using the ID from `ArticleList`
return (
<div></div>

    )
}
  

export default blog