Question 201555 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – getStaticProps is not working. Can someone help me?

import React from 'react'
import styles from './page.module.css'


export async function getStaticProps (){
    const data = await fetch('https://jsonplaceholder.typicode.com/todos')
    const todos  = await data.json();
    console.log(todos);
    return {
        props: {todos}
    }
}

export default function Todos ({todos}) {
  return (
    <>
        <h1>Todos</h1>
        <ul className={styles.todolist}>
            {todos}
        </ul>
    </>
  )
}

getStaticProps is not working, console.log() it doesn’t show anything.

I would like it to show a list of todos

Tags:

2

Answers


  1. 0

    If you are not using a static page, you need to use getServerSideProps instead.

    You are not adding any error handling for the fetch request, in case it fails or returns an invalid response. This could cause your page to break or show incorrect data. You should use a try/catch block to handle any errors and return a fallback value for the props. For example:

    export async function getStaticProps() {
  try {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos = await data.json();
    console.log(todos);
    return {
      props: { todos },
    };
  } catch (error) {
    console.error(error);
    return {
      props: { todos: [] },
    };
  }
}

    I hope these suggestions are helpful. Let me know if you have any questions.

    Login or Signup to reply.
  2. 0

    If the file is in the right location, with the code you provide getStaticProps should work, and in fact, it is running on the server so you cannot see logs from the browser console, however, you can find it in the terminal console.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search