Merge pull request #310 from pantheon-systems/PCC-1567-address-early-…

…adopter-starter-kit-issues

PCC-1567 address early adopter starter kit issues

starters/nextjs-starter-approuter-ts/app/examples/page.tsx

@@ -13,7 +13,7 @@ export default function ExamplesPageTemplate() {
               This page outlines a growing list of common use cases that can be
               used as a reference when building using this starter kit. If you
               don't need them for your site, feel free to delete the
-              `pages/examples` directory in your codebase.
+              `app/examples` directory in your codebase.
             </em>
           </p>
           <ul>

starters/nextjs-starter-approuter-ts/next.config.js

@@ -9,12 +9,12 @@ require("dotenv").config({
 function ensureEnvVariable(name) {
   if (process.env[name] == null) {
     if (process.env.NODE_ENV === "development") {
-      throw new Error(
-        `No ${name} found.\nSee the README.md for information on setting this variable locally.`,
+      console.error(
+        `No ${name} found.\nSee the README.md for information on setting this variable locally.`
       );
     } else if (process.env.NODE_ENV === "production") {
-      throw new Error(
-        `No ${name} Endpoint found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`,
+      console.warn(
+        `No ${name} environment variable found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`
       );
     }
   }

starters/nextjs-starter-approuter-ts/package.json

@@ -22,11 +22,15 @@
     "update-snapshots": "vitest run --update --silent",
     "coverage": "vitest run --coverage"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@pantheon-systems/pcc-react-sdk": "~3.8.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@tailwindcss/typography": "0.5.10",
+    "@types/node": "^20.11.21",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",

starters/nextjs-starter-ts/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

starters/nextjs-starter-ts/next.config.js

@@ -9,12 +9,12 @@ require("dotenv").config({
 function ensureEnvVariable(name) {
   if (process.env[name] == null) {
     if (process.env.NODE_ENV === "development") {
-      throw new Error(
-        `No ${name} found.\nSee the README.md for information on setting this variable locally.`,
+      console.error(
+        `No ${name} found.\nSee the README.md for information on setting this variable locally.`
       );
     } else if (process.env.NODE_ENV === "production") {
-      throw new Error(
-        `No ${name} Endpoint found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`,
+      console.warn(
+        `No ${name} environment variable found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`
       );
     }
   }

starters/nextjs-starter-ts/package.json

@@ -22,11 +22,15 @@
     "update-snapshots": "vitest run --update --silent",
     "coverage": "vitest run --coverage"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@pantheon-systems/pcc-react-sdk": "~3.8.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@tailwindcss/typography": "0.5.10",
+    "@types/node": "^20.11.21",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",

starters/nextjs-starter-ts/pages/examples/ssg-isr/[uri].tsx

@@ -55,61 +55,77 @@ export const getStaticProps: GetStaticProps<{}, { uri: string }> = async ({
     };
   }
 
-  const article = await PCCConvenienceFunctions.getArticleBySlugOrId(uri);
+  try {
+    const article = await PCCConvenienceFunctions.getArticleBySlugOrId(uri);
+
+    if (!article) {
+      return {
+        notFound: true,
+      };
+    }
+
+    const recommendedArticles =
+      await PCCConvenienceFunctions.getRecommendedArticles(article.id);
 
-  if (!article) {
+    return {
+      props: {
+        article,
+        recommendedArticles,
+      },
+    };
+  } catch (e) {
+    console.error(e);
     return {
       notFound: true,
     };
   }
-
-  const recommendedArticles =
-    await PCCConvenienceFunctions.getRecommendedArticles(article.id);
-
-  return {
-    props: {
-      article,
-      recommendedArticles,
-    },
-  };
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const publishedArticles = await PCCConvenienceFunctions.getAllArticles(
-    {
-      publishingLevel: "PRODUCTION",
-    },
-    {
-      publishStatus: "published",
-    },
-  );
-
-  const pagePaths = publishedArticles.map((article) => {
-    const id = article.id;
-    const slug = article.metadata.slug;
-
-    // Generate both slug and id paths for each article
-    const paths = [
+  try {
+    const publishedArticles = await PCCConvenienceFunctions.getAllArticles(
       {
-        params: {
-          uri: id,
-        },
+        publishingLevel: "PRODUCTION",
       },
-    ];
+      {
+        publishStatus: "published",
+      },
+    );
+
+    const pagePaths = publishedArticles.map((article) => {
+      const id = article.id;
+      const slug = article.metadata.slug;
 
-    if (slug) {
-      paths.push({
-        params: {
-          uri: String(slug),
+      // Generate both slug and id paths for each article
+      const paths = [
+        {
+          params: {
+            uri: id,
+          },
         },
-      });
-    }
+      ];
+
+      if (slug) {
+        paths.push({
+          params: {
+            uri: String(slug),
+          },
+        });
+      }
 
-    return paths;
-  });
+      return paths;
+    });
 
-  return {
-    paths: pagePaths.flat(),
-    fallback: "blocking",
-  };
+    return {
+      paths: pagePaths.flat(),
+      fallback: "blocking",
+    };
+  } catch (e) {
+    console.error(e);
+
+    return {
+      paths: [],
+      fallback: "blocking",
+    };
+  }
 };

starters/nextjs-starter-ts/pages/examples/ssg-isr/index.tsx

@@ -65,20 +65,28 @@ export default function SSGISRExampleTemplate({
 }
 
 export async function getStaticProps() {
-  const {
-    data: articles,
-    totalCount,
-    cursor,
-  } = await PCCConvenienceFunctions.getPaginatedArticles({
-    pageSize: PAGE_SIZE,
-  });
-
-  return {
-    props: {
-      articles,
-      cursor,
+  try {
+    const {
+      data: articles,
       totalCount,
-    },
-    revalidate: 60,
-  };
+      cursor,
+    } = await PCCConvenienceFunctions.getPaginatedArticles({
+      pageSize: PAGE_SIZE,
+    });
+
+    return {
+      props: {
+        articles,
+        cursor,
+        totalCount,
+      },
+      revalidate: 60,
+    };
+  } catch (e) {
+    console.error(e);
+
+    return {
+      notFound: true,
+    };
+  }
 }

starters/nextjs-starter/next-env.d.ts

@@ -2,4 +2,5 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+

starters/nextjs-starter/next.config.js

@@ -9,12 +9,12 @@ require("dotenv").config({
 function ensureEnvVariable(name) {
   if (process.env[name] == null) {
     if (process.env.NODE_ENV === "development") {
-      throw new Error(
-        `No ${name} found.\nSee the README.md for information on setting this variable locally.`,
+      console.error(
+        `No ${name} found.\nSee the README.md for information on setting this variable locally.`
       );
     } else if (process.env.NODE_ENV === "production") {
-      throw new Error(
-        `No ${name} Endpoint found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`,
+      console.warn(
+        `No ${name} environment variable found.\nLink to your PCC Instance or set the ${name} environment variable in the settings tab in the dashboard\nIf your site does not require a backend to build, remove this check from the next.config.js.`
       );
     }
   }

starters/nextjs-starter/package.json

@@ -22,6 +22,9 @@
     "update-snapshots": "vitest run --update --silent",
     "coverage": "vitest run --coverage"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@pantheon-systems/pcc-react-sdk": "~3.8.0",
     "@radix-ui/react-popover": "^1.1.1",