title: Dynamic routing with getServerSideProps in Nextjs
body: <p>I'm trying to learn nextjs. Struggling to work out routing with <code>getServerSideProps</code>.</p>
  <p>Using a free API I have a list of countries displayed on the DOM. I want to dynamically link to a country and data be fetched and displayed for that specific country.</p>
  <p>Heres my code so far</p>
  <pre><code>const Country = props =&gt; (
    &lt;Layout&gt;
      &lt;h1&gt;{props.country.name}&lt;/h1&gt;
      &lt;span&gt;{props.country.capital}&lt;/span&gt;
    &lt;/Layout&gt;
  );
  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 } };
  }
  export default Country;
  
  </code></pre>
  <pre><code>  &lt;div className='container'&gt;
      &lt;Head&gt;
        &lt;title&gt;Countries List&lt;/title&gt;
        &lt;link rel='icon' href='/favicon.ico' /&gt;
      &lt;/Head&gt;
      &lt;Layout&gt;
        &lt;main&gt;
          &lt;h1&gt;
            Countries{' '}
            &lt;span role='img' aria-label='world emoji'&gt;
              
            &lt;/span&gt;
          &lt;/h1&gt;
          &lt;ul&gt;
            {countries.map(country =&gt; (
              &lt;li key={country.name}&gt;
                &lt;Link href='/p/[id]' as={`/p/${country.name}`}&gt;
                  &lt;a&gt;{country.name}&lt;/a&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/main&gt;
      &lt;/Layout&gt;
    &lt;/div&gt;
  );
  
  export async function getServerSideProps() {
    // Call an external API endpoint to get posts.
    const res = await fetch('https://restcountries.eu/rest/v2/all');
    const countries = await res.json();
  
    // By returning { props: posts }, the Blog component
    // will receive `posts` as a prop at build time
    return {
      props: {
        countries,
      },
    };
  }
  
  export default Home;
  
  </code></pre>
  <p>The URL dynamically routes ok. For example, when you click on Afghanistan the URL shows <code>http://localhost:3000/p/Afghanistan</code>.</p>
  <p>My country component however doesn't display anything and <code>undefined</code> is printed to the terminal.</p>
  <p>Example of URL and response from URL: <code>https://restcountries.eu/rest/v2/name/Afghanistan</code></p>
  <pre class="lang-json prettyprint-override"><code>{
  name: &quot;Afghanistan&quot;
  }
  </code></pre>
  <p>Apologies if a noob question. Trying to learn nextjs</p>