[id].js

import { getPhotoById, getAllPhotos } from "../../lib/utils";
import {
  Box,
  Divider,
  Center,
  Text,
  Flex,
  Spacer,
  Button,
} from "@chakra-ui/react";
import Image from "next/image";
import Head from "next/head";
import Link from "next/link";
import BackHome from "../../components/BackHome";
import NavLinks from "../../components/NavLinks";
import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
import { Img } from "@chakra-ui/react";

export async function getStaticPaths() {
  const photos = await getAllPhotos();

  // Get the paths we want to pre-render based on posts
  const paths = photos.map((photo) => ({
    params: { id: "" + photo.id },
  }));

  return {
    paths: paths, // render page for all photos
    fallback: false, // ...and generate a 404 for other values
  };
}

export async function getStaticProps({ params }) {
  const pic = await getPhotoById(params.id);

  // Fix dimensions if really big picture
  console.log("Pic dims: ", pic.dimensions.width, pic.dimensions.height);
  if (pic.dimensions.widths > 1000 || pic.dimensions.heigth > 1000) {
    pic.dimensions.width /= 2;
    pic.dimensions.height = 2;
    console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
  }
  if (pic.dimensions.width > 1000 || pic.dimensions.heigth > 1000) {
    pic.dimensions.width /= 2;
    pic.dimensions.height /= 2;
    console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
  }
  return {
    props: {
      pic,
    },
  };
}

export default function Photos({ pic }) {
  return (
    <Box p="2rem" bg="gray.200" minH="100vh">
      <Head>
        <title> Photo {pic.id}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <BackHome />
      <NavLinks prev={pic.prev} next={pic.next} />

      <Center>
        <a href={pic.path}>
          <Image
            src={pic.path}
            width={pic.dimensions.width || 480}
            height={pic.dimensions.height || 480}
            // objectFit="cover"
            quality={80}
            priority
            loading="eager"
          />
        </a>
      </Center>
      <NavLinks prev={pic.prev} next={pic.next} />
    </Box>
  );
}