NextJS 13 Data Fetch Api with getStaticProps Example

In this section we will see how to fetch api data in nextjs 13 using getStaticProps. For this tutorial we will use tailwind v3 and for data fetch api Jsonplaceholder  fake API. Before we start you need to install & setup nextjs 13 with tailwind css.

Install Tailwind CSS In NextJS 13

Tool Use

Tailwind CSS 3.x

NextJS 13

Jsonplaceholder  fake API

Example 1

Nextjs 13 simple fetch api data with getStaticProps.

export default function Home({ posts }) {
  return (
    <>
      <div className="my-4">
        <h1 className="text-2xl text-center text-blue-600">
          NextJS 13 Data Fetch Api with getStaticProps Example
        </h1>
      </div>
      <div className="grid gap-2 my-4 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post, key) => (
          <article
            className="max-w-md mx-auto mt-4 duration-300 border rounded-md shadow-lg hover:shadow-sm"
            key={key}
          >
            <div>
              <div className="pt-3 mb-3 ml-4 mr-2">
                <h3 className="text-xl text-gray-900">{post.title}</h3>
                <p className="text-sm text-gray-400 ">{post.body}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </>
  );
}

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

next 13 fetch api data with getstaticprops.

Example 2

Nextjs data fetch api lib/ directory with getStaticProps.

1. Create a lib folder in the root of your project.

2. Inside the lib folder, create a file api.tsx or api.js and add the following code:

nextjs 13 lib data fetch api with getStaticProps

lib/api.tsx or lib/api.js

export async function loadPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

Import api.tsx or api.js in home page or where you want to fetch data.

import { loadPosts } from '../lib/api';

export default function Home({ posts }) {
  return (
    <>
      <div className="my-4">
        <h1 className="text-2xl text-center text-blue-600">
          NextJS 13 Data Fetch Api with getStaticProps Example
        </h1>
      </div>
      <div className="grid gap-2 my-4 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post, key) => (
          <article
            className="max-w-md mx-auto mt-4 duration-300 border rounded-md shadow-lg hover:shadow-sm"
            key={key}
          >
            <div>
              <div className="pt-3 mb-3 ml-4 mr-2">
                <h3 className="text-xl text-gray-900">{post.title}</h3>
                <p className="text-sm text-gray-400 ">{post.body}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </>
  );
}

export async function getStaticProps() {
  const posts = await loadPosts();
  return { props: { posts } };
} 

Example 3

Nextjs data fetch api .env environment variables with getStaticProps. First you need to create .env file and add API_URL

.env

API_URL=https://jsonplaceholder.typicode.com

lib/api.tsx or lib/api.js

export async function loadPosts() {
  const res = await fetch(`${process.env.API_URL}/posts`);
  return res.json();
}

import as it is loadPosts in home page.

import { loadPosts } from '../lib/api';

export default function Home({ posts }) {
  return (
    <>
      <div className="my-4">
        <h1 className="text-2xl text-center text-blue-600">
          NextJS 13 Data Fetch Api with getStaticProps Example
        </h1>
      </div>
      <div className="grid gap-2 my-4 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post, key) => (
          <article
            className="max-w-md mx-auto mt-4 duration-300 border rounded-md shadow-lg hover:shadow-sm"
            key={key}
          >
            <div>
              <div className="pt-3 mb-3 ml-4 mr-2">
                <h3 className="text-xl text-gray-900">{post.title}</h3>
                <p className="text-sm text-gray-400 ">{post.body}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </>
  );
}

export async function getStaticProps() {
  const posts = await loadPosts();
  return { props: { posts } };
}