Dynamic routing with getServerSideProps in Nextjs

Question

I'm trying to learn nextjs. Struggling to work out routing with getServerSideProps.

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.

Heres my code so far

const Country = props => (
  <Layout>
    <h1>{props.country.name}</h1>
    <span>{props.country.capital}</span>
  </Layout>
);
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;

  <div className='container'>
    <Head>
      <title>Countries List</title>
      <link rel='icon' href='/favicon.ico' />
    </Head>
    <Layout>
      <main>
        <h1>
          Countries{' '}
          <span role='img' aria-label='world emoji'>
            
          </span>
        </h1>
        <ul>
          {countries.map(country => (
            <li key={country.name}>
              <Link href='/p/[id]' as={`/p/${country.name}`}>
                <a>{country.name}</a>
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </Layout>
  </div>
);

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;

The URL dynamically routes ok. For example, when you click on Afghanistan the URL shows http://localhost:3000/p/Afghanistan.

My country component however doesn't display anything and undefined is printed to the terminal.

Example of URL and response from URL: https://restcountries.eu/rest/v2/name/Afghanistan

{
name: "Afghanistan"
}

Apologies if a noob question. Trying to learn nextjs

Yilmaz · Accepted Answer · 2022-11-10T04:22:43.357

55

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>
  );
}

edited Nov 10 '22 at 04:22

answered Apr 16 '20 at 00:18

Yilmaz

35,338
10
157
202

3

in case it helps anyone, this response is completely incorrect - though it could just be outdated. In 2020 next's getServerSideProps requires you to return an object containing the keyword props for your props to go into the component it is exported alongside. – Andy Lorenz Apr 28 '20 at 13:50
1

well I'm not entirely sure what you say is true, I've based my statement on (a) what is explicitly stated in the next js documentation, and (b) a working piece of my own code.... – Andy Lorenz Apr 28 '20 at 15:37
1

the title refers to getServerSideProps ... the OP is for getServerSideProps ... your own answer is for getServerSideProps ... my comment was about getServerSideProps ... so why are you now talking about getInitialProps ??!! – Andy Lorenz Apr 29 '20 at 09:11
(though I would also say its a shame they are inconsistent given they are both providing very similar functions within the same framework, but it was probably something to do with backwards compatibility) – Andy Lorenz Apr 29 '20 at 09:15

score 2 · Answer 2 · answered Jan 11 '22 at 17:32

There's nothing wrong in how you're handling the dynamic routing of the page. The issue is that the data returned by the API is an array but your code expects it to be an object. You can retrieve the first item from the array and pass that to the component from getServerSideProps.

export async function getServerSideProps(context) {
    const { id } = context.params; // Use `context.params` to get dynamic params
    const res = await fetch(`https://restcountries.com/v2/name/${id}`); // Using `restcountries.com` as `restcountries.eu` is no longer accessible
    const countryList = await res.json();
    const [country] = countryList; // Get first item in array returned from API

    return { props: { country } };
}

const Country = ({ country }) => {
    console.log(country);
    
    return (
        <>
            <h1>{country.name}</h1>
            <span>{country.capital}</span>
        </>
    );
};

export default Country;

score 1 · Answer 3 · answered Jan 27 '21 at 09:03

Just to add to the accepted answer, you could also destructure to make it (imho) more readable. This is entirely optional though

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

Dynamic routing with getServerSideProps in Nextjs

3 Answers3

UPDATE

Next.js 13 Update

Linked

Related