title: Is it possible to pass dynamic props, from one page to another with next.js?
body: <p>I'm new to Next and have been trying to make a page(index.js) that fetches data(countries) and then displays that data, where each returned element(country) has a button to go to a page(info.js) where that specific countries data will be displayed, was wondering if its possible to pass the props(all country data) to the info.js page? I've tried reading the documentation and watching YT videos but can't seem understand what i'm reading/watching.</p>
  <p>index.js:</p>
  <pre><code>import Link from 'next/link'
  
  Welcome.getInitialProps = async function (props) {
    const res = await fetch('https://restcountries.eu/rest/v2/all')
    const data = await res.json()
    return {
      data: data
    }
  }
  
  const MyLink = props =&gt; {
    return (
      &lt;p&gt;
        &lt;Link href={`/info?name=${props.name}`} &gt;
          &lt;a&gt;Learn More&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/p&gt;
    )
  }
  
  function Welcome(props) {
    return (
      &lt;div&gt;
        &lt;div className=&quot;main-content&quot;&gt;
          &lt;style jsx&gt;{`
            .main-content {
              width: 80%;
              margin: 0 auto;
              display: grid;
              grid-template-columns: repeat(5, 1fr);
              grid-gap: 5px;
            }
            .item {
              border: 1px solid black;
              text-align: center;
            }
            .item ul{
              padding: 0;
            }
            .item ul li {
              list-style-type: none;           
            }
          `}&lt;/style&gt;
          {props.data.map(country =&gt; (
            &lt;div key={country.numericCode} className=&quot;item&quot;&gt;
              &lt;h4&gt;{country.name}&lt;/h4&gt;
              &lt;p&gt;Region: {country.region}&lt;/p&gt;
              &lt;p&gt;Population: {country.population}&lt;/p&gt;
              &lt;MyLink name={country.name}  borders={country.borders} currencies={country.currencies}/&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default Welcome
  </code></pre>
  <p>info.js:</p>
  <pre><code>import { withRouter } from 'next/router'
  import Link from 'next/link'
  
  const Info = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;{props.router.query.name}&lt;/h1&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;Home&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  
  export default withRouter(Info)
  </code></pre>