Breaking News: Grepper is joining You.com. Read the official announcement!

a page which uses GetServerSidedProps for props and gets it from a api request

Mushy Meerkat answered on June 30, 2023 Popularity 1/10 Helpfulness 1/10

answer a page which uses GetServerSidedProps for props and gets it from a api request

a page which uses GetServerSidedProps for props and gets it from a api request

Comment

import { GetServerSideProps, NextPage } from 'next';

interface Post {
  id: number;
  title: string;
  body: string;
}

interface ServerSideProps {
  posts: Post[];
}

const MyPage: NextPage<ServerSideProps> = ({ posts }) => {
  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps<ServerSideProps> = async () => {
  try {
    const response = await fetch('https://api.example.com/posts');
    const posts = await response.json();

    return {
      props: {
        posts,
      },
    };
  } catch (error) {
    console.error('Error fetching posts:', error);

    return {
      props: {
        posts: [],
      },
    };
  }
};

export default MyPage;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: api gets request typescript uses

Link to this answer
Share Copy Link

Contributed on Jun 30 2023

Mushy Meerkat

0 Answers Avg Quality 2/10

a page which uses GetServerSidedProps for props and gets it from a api request

Contents

More Related Answers

a page which uses GetServerSidedProps for props and gets it from a api request

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.