Implemented incremental static regeneration for project pages

- Added types to params for blog pages
mbeps · Jul 18, 2023 · ae9dfd0 · ae9dfd0
1 parent 87ef50c
commit ae9dfd0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx
@@ -23,19 +23,28 @@ const getBlogContent = (slug: string) => {
  * @returns (Array): array of blogs
  */
 export const generateStaticParams = async () => {
+  // get all blogs with metadata
   const blogs = getBlogMetadata();
+
+  // Map through all blogs and return an array of objects with the slug for each blog
   return blogs.map((blog) => ({
     slug: blog.slug,
   }));
 };
 
+interface BlogPageProps {
+  params: {
+    slug: string;
+  };
+}
+
 /**
  * Page displaying the rendered markdown which can be read by the user.
  * @param props: the content of the blog
  * @returns (JSX.Element): content of the blog
  */
-const BlogPage = (props: any) => {
-  const slug = props.params.slug;
+const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
+  const slug = params.slug;
   const blog = getBlogContent(slug);
   return (
     <div>

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import getDescriptionBySlug from "@/actions/projects/getDescriptionBySlug";
 import getImagesListBySlug from "@/actions/projects/getImagesListBySlug";
 import getLanguageBySlug from "@/actions/projects/getLanguageBySlug";
@@ -18,28 +16,32 @@ import Project, {
   otherProjects,
   webdevProjects,
 } from "@/types/projects";
-import { RouteHandlerManager } from "next/dist/server/future/route-handler-managers/route-handler-manager";
 import Image from "next/image";
 import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { notFound } from "next/navigation";
 import React from "react";
 import { BsArrowUpRightSquare, BsGithub } from "react-icons/bs";
 import { IoReaderOutline } from "react-icons/io5";
 
-const generateStaticParams = async () => {
-  const projects = [
+export const generateStaticParams = async () => {
+  const projects: Project[] = [
     ...webdevProjects,
     ...extraWebDevProjects,
     ...backendWebDevProjects,
     ...machineLearningProjects,
     ...javaAssignments,
     ...otherProjects,
   ];
-  return projects.map((project) => ({
-    slug: project.slug,
-  }));
+
+  return projects.map((project) => ({ slug: project.slug }));
 };
 
+interface ProjectPageProps {
+  params: {
+    slug: string;
+  };
+}
+
 /**
  * Displays the page for a specific project.
  * The project is determined by the slug in the URL.
@@ -54,10 +56,8 @@ const generateStaticParams = async () => {
  * @param props (any)
  * @returns (JSX.Element): Project Page Component
  */
-const ProjectPage: React.FC = (props: any) => {
-  const pathname = usePathname(); // used to determine the current route
-  const params = useParams(); // retrieve the URL parameters
-  const router = useRouter();
+const ProjectPage: React.FC<ProjectPageProps> = ({ params }) => {
+  const slug = params.slug;
 
   const allProjects: Project[] = [
     ...webdevProjects,
@@ -68,21 +68,21 @@ const ProjectPage: React.FC = (props: any) => {
     ...otherProjects,
   ];
 
-  const project = getProjectBySlug(params.slug, allProjects);
-  const projectName = getNameBySlug(params.slug, allProjects);
-  const projectTechnologies = getTechnologiesBySlug(params.slug, allProjects);
-  const projectLanguage = getLanguageBySlug(params.slug, allProjects);
-  const projectDescription = getDescriptionBySlug(params.slug, allProjects);
+  const project = getProjectBySlug(slug, allProjects);
+  const projectName = getNameBySlug(slug, allProjects);
+  const projectTechnologies = getTechnologiesBySlug(slug, allProjects);
+  const projectLanguage = getLanguageBySlug(slug, allProjects);
+  const projectDescription = getDescriptionBySlug(slug, allProjects);
 
-  let gallery = getImagesListBySlug(params.slug, allProjects);
+  let gallery = getImagesListBySlug(slug, allProjects);
   // Adds full path to images
   if (gallery) {
-    gallery = gallery.map((image) => `/projects/${params.slug}/${image}`);
+    gallery = gallery.map((image) => `/projects/${slug}/${image}`);
   }
 
-  // If the project does not exist, redirect to the 404 page
+  // redirect to not found page is the project is not valid
   if (!project) {
-    router.push("not-found");
+    notFound();
   }
 
   return (