How to create dynamic routes in NextJs in href param in Link component

I have the following code

import Link from "next/link";

type Country = {
  name: {
    common: string
  },
  region: string
}

export default async function Home() {

  const response = await fetch(`https://restcountries.com/v3.1/all`);

  const countries = await response.json();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {
        countries.map((c: Country) => {
          return <Link href={`/countries/${c.name}`}>
            Norway
          </Link>
        })
      }
    </main>
  );
}

Also in my app folder I have folder countries and inside i have [name] folder. I am listing countries and when I click on certain country i want to go to page with more information about this country. When href in Link is hardcoded i mean /countries/Norway for example everything is fine. But when I try to make href dynamic the following error is occured - Error: Dynamic href /users/[object Object] found in while using the /app router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href. What is the correct way to do the dynamic routes. Thanks.

Solution

if you check the response data from the API call, you'll find an array of countries in this format:

{
  "name": {
    "common": "Moldova",
    "official": "Republic of Moldova",
    "nativeName": {
      "ron": {
        "official": "Republica Moldova",
        "common": "Moldova"
      }
    }
  },
  "tld": [
    ".md"
  ],
  "cca2": "MD",
  "ccn3": "498",
  "cca3": "MDA",
  "cioc": "MDA",
  "independent": true,
  "status": "officially-assigned",
  "unMember": true,
  "currencies": {
    "MDL": {
      "name": "Moldovan leu",
      "symbol": "L"
    }
  }
...
}

In this structure, the name is an object, that's why you get the error Error: Dynamic href /users/[object Object]. You can access the common name using:

c.name.common