Dynamic routing with getServerSideProps in Nextjs

export async function getServerSideProps(context) {
  const { id } = context.query;
  const res = await fetch(`https://restcountries.eu/rest/v2/name/${id}`);
  const country = await res.json();

  console.log(`Fetched place: ${country.name}`);
  return { props: { country } };
}

you are returning a nested object from above function

    { props: { country:country } }

so this prop will be attached to props as like this:

      `props.props`

this is how you should implement

const Country = props => (
  <Layout>
    <h1>{props.props.country.name}</h1>
    <span>{props.props.country.capital}</span>
  </Layout>
);

UPDATE

In early version of next.js I think updated after version 9, we were not returning from serverside function by using props. As of now correct way of implementation is

return {
    props: {
      countries,
    },
  };

Next.js 13 Update

In next.js 13, if you set app directory, components in this directory will be server-rendered components by default. That means everything will be run on the server and we do not need to write specifiacallygetServerSideProps. in “app” directory, if your file name is surrounded by [..id], it means it is a dynamic route. In page.jsx, you can access id like this

export default function ProductPage({ params }) {
  return (
    <div>
      <h1>Product ID: {params.id}</h1>
    </div>
  );
}