Data fetching and handling

Introduction to Data Fetching and Handling in Next.js

Next.js is a powerful framework for building React applications. One of its standout features is the ability to fetch and handle data. In this tutorial, we'll explore how to fetch data from an API and display it in a Next.js application.

Prerequisites

• Basic knowledge of JavaScript
• Basic knowledge of React
• Basic understanding of Next.js
• Node.js and npm installed on your machine

Getting Started

First, we need to setup a new Next.js application. If you have Node.js and npm installed, you can do this by running the following command in your terminal:

npx create-next-app@latest data-fetching-example

This command will create a new Next.js application in a directory called data-fetching-example. You can change the name to anything you like.

Fetching Data in Next.js

Next.js provides several methods to fetch data, including getStaticProps, getServerSideProps, and getInitialProps. We'll focus on getStaticProps and getServerSideProps in this tutorial.

getStaticProps

getStaticProps is a Next.js data fetching method that runs at build time. It's perfect for fetching data that doesn't change often. The data fetched with getStaticProps will be used to generate a static HTML page.

Let's fetch some data from the JSONPlaceholder API using getStaticProps. Create a new file in the pages directory called posts.js and add the following code:

import axios from 'axios';

export async function getStaticProps() {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return { props: { posts: res.data } }
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Here, we're using Axios to fetch data from the JSONPlaceholder API. The fetched data is then passed as a prop to the Posts component.

getServerSideProps

getServerSideProps is another Next.js data fetching method that runs on every request. It's ideal for fetching data that changes frequently. The data fetched with getServerSideProps will be used to generate HTML on the fly, every time the page is visited.

Let's update our posts.js file to use getServerSideProps instead of getStaticProps:

import axios from 'axios';

export async function getServerSideProps() {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return { props: { posts: res.data } }
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

The difference between getStaticProps and getServerSideProps is when they fetch data. getStaticProps fetches data at build time, while getServerSideProps fetches data on every request.

Conclusion

In this tutorial, we've learned how to fetch and handle data in a Next.js application. We've looked at two data fetching methods provided by Next.js: getStaticProps and getServerSideProps. These methods allow us to fetch data at different times and serve different purposes, providing us with flexibility when building our application.

Remember:

• Use getStaticProps for data that doesn't change often.
• Use getServerSideProps for data that changes frequently.

Happy coding!