Next.js — Rendering Data

We can create server-side rendered React apps and static sites easily Next.js.

In this article, we’ll take a look at how to render data with Next.js

Static Rendering

We can create pages with dynamic routes.

To do that, we add a getStaticPaths function to our component file and export it.

Also, we’ve to add brackets around the name of the file to make it dynamic.

For example, we create a country/[name].js file to add a dynamic route to get the country data and display it with Next.js.

In country/[name].js , we write:

function Country({ country }) {
  return <p>{country.name}</p>
}

export async function getStaticPaths() {
  const res = await fetch('https://restcountries.eu/rest/v2/all')
  const countries = await res.json()
  const paths = countries.map((country) => `/country/${country.name.toLowerCase()}`)
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://restcountries.eu/rest/v2/name/${params.name}`)
  const [country] = await res.json()
  return { props: { country } }
}

export default Country

We have the getStaticPaths method to return all the paths that we want to prerender.

All we have to do is get the data from the REST countries API and create an array of paths that we want to render.

fallback: false means that other routes that aren’t rendered should return 404.

Also, we have the getStaticProps function to get the data for the individual pre-rendered routes.

The params object has the URL parameters that we passed in.

In the Country component, we render the result that comes from getStaticProps .

Now when we go to a URL like http://localhost:3000/country/canada, we should see the country name displayed.

This will pre-render the pages statically and use them for all requests.

Static generation is good for pages that don’t change much like marketing pages, blog posts, product listings, and documentation.

Server-side Rendering

An alternative way to display render content with Next.js is with server-side rendering.

To do that, we add the getServerSideProps function to our page.

For example, we can create a pages/yesno.js file and write:

function YesNo({ data }) {
  return <p>{data.answer}</p>
}

export async function getServerSideProps() {
  const res = await fetch(`https://yesno.wtf/api`)
  const data = await res.json()
  return { props: { data } }
}

export default YesNo

We have the getServerSideProps function to get the data.

And then we get the data that’s fetched in the props of the YesNo component and render it.

Conclusion

We can render data in 2 different ways with Next.js.

One way is to pre-render routes statically. It’s faster and it’s recommended

The other way is to render routes with server-side rendering.