Synced via Snip

.page..js

j// [page].js

import { Box, Flex, Image } from "@chakra-ui/react";
import { Section } from "@/components/section";
import { getPage, getRecords } from "@/libs/airtable";

const Sandbox = ({ page }) => {
  console.log("🚀 ~ file: sandbox.js ~ line 6 ~ Sandbox ~ page", page);
  return (
    <>
      <Image
        src='/blob-decor.svg'
        alt='decorative-blob'
        pos='absolute'
        zIndex={-1}
        w='30%'
        top={0}
        transform='translateY(-5em) '
      />
      <Box bg='white' h='200px' w='80%' m='auto' boxShadow='md'>
        Test
      </Box>
    </>
  );
};

export default Sandbox;

export async function getStaticPaths() {
  const records = await getRecords();
  const sites = records.map((site) => ({
    ...site,
  }));

  const paths = sites.map((site) => {
    console.log("🚀 ~ file: [page].js ~ line 34 ~ paths ~ site", site);
    const page = site.fields["title (from pages)"][0];
    const pageId = site.fields["pages"][0];
    console.log("🚀 ~ file: [page].js ~ line 35 ~ paths ~ page", page);
    return { params: { pageId, page } };
  });
  console.log("🚀 ~ file: [page].js ~ line 37 ~ paths ~ paths", paths);

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  console.log("🚀 ~ file:[page].js ~ line 49 ~ getStaticProps ~ page", params);
  const currentPage = await getPage(params?.pageId);
  console.log(
    "🚀 ~ file: [page].js ~ line 46 ~ getStaticProps ~ page"
    // currentPage
  );

  return {
    props: {
      page: "currentPage",
      // test: "test",
    },
  };
}

airtable.js

import Airtable from "airtable";

export const base = new Airtable({
  apiKey: process.env.AIRTABLE_API_KEY,
}).base(process.env.AIRTABLE_BASE_ID);

const sitesBase = base("sites");
const pagesBase = base("pages");
const sectionsBase = base("sections");
const blocksBase = base("blocks");
const contentBase = base("content");
const cardsBase = base("cards");
const listsBase = base("lists");
const mediaBase = base("media");
const seoBase = base("seo");

export const getRecords = async () => {
  const response = await sitesBase.select({}).all();

  return response;
};

export const getPage = async (pageId) => {
  console.log("🚀 ~ file: airtable.js ~ line 24 ~ getPage ~ page", pageId);
  const response = await pagesBase.find(pageId, (err, record) => {
    if (err) return console.error(err);
    console.log("retrieved", record.title);
  });

  return response;
};