Next.js + Amplify - pages/posts/[id].js part 1

[id].js

// pages/posts/[id].js
import { API } from 'aws-amplify';
import { getPost, listPosts } from '../../src/graphql/queries'
import '../../configureAmplify';
import { useRouter } from 'next/router';

export default function Post({ post }) {
  const router = useRouter();
  if (router.isFallback) return <div>Loading...</div>
  return (
    <div>
      <h2>{post.name}</h2>
      <p>{post.content}</p>
      <span>By: {post.username}</span>
    </div>
  )
}

export async function getStaticPaths() {
  const postData = await API.graphql({ query: listPosts });
  const postIds = postData.data.listPosts.items.map(post => ({ params: { id: post.id } }));
  return {
    paths: postIds, fallback: true
  };
}

export async function getStaticProps(context) {
  const id = context.params.id;
  const post = await API.graphql({ query: getPost, variables: { id } });
  return {
    props: {
      post: post.data.getPost
    }
  }
}