Tsc/improvements

.lintstagedrc

@@ -1,7 +1,7 @@
 {
-  "*.+(js|jsx)":[
+  "*.+(js|jsx|ts|tsx)":[
     "eslint"
-  ],
+    ],
   "*.+(js|json|md)":[
     "prettier --write"
   ]

jest.config.js

@@ -12,8 +12,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",
   rootDir: "./",

package.json

@@ -17,6 +17,7 @@
     "pretty": "prettier --ignore-path .gitignore \"**/*.+(ts|tsx|js|json|md)\"",
     "start": "next start",
     "test": "jest",
+    "tsc": "npx tsc --noEmit --pretty",
     "validate": "npm-run-all --parallel check-format lint",
     "prepare": "husky install"
   },
@@ -42,6 +43,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.13",
     "@types/react": "18.3.11",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^8.8.0",
     "@typescript-eslint/parser": "^8.8.0",
     "core-js": "^3.38.1",
@@ -71,6 +73,7 @@
     "prettier": "^3.3.3",
     "regenerator-runtime": "^0.14.1",
     "start-server-and-test": "^2.0.8",
+    "tsc-files": "^1.1.4",
     "typescript": "^5.6.2"
   }
 }

pages/404.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Layout from "../src/components/Layout/Layout";

pages/_app.tsx

@@ -3,9 +3,11 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 // Some global styles but then afterward css module pattern instead
 import "../src/styles/globals.scss";
 
+import { AppProps } from "next/app";
+
 export const PageContext = createContext("");
 
-const App = ({ Component, pageProps }) => {
+const App = ({ Component, pageProps }: AppProps) => {
   useEffect(() => {
     const body = document.querySelector("body");
     if (body && !body.classList.contains("js")) {

pages/_document.tsx

@@ -1,7 +1,13 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     return { ...initialProps };
   }

pages/about.tsx

@@ -1,9 +1,19 @@
+import React from "react";
 import Head from "next/head";
 import Layout from "../src/components/Layout/Layout";
 import { getAllCards } from "../src/utils/contentfulPosts";
 import { links } from "../src/utils/links";
 
-const About = ({ cards }) => {
+type AboutProps = {
+  cards: {
+    fields: {
+      headline: string;
+      detail: string;
+    };
+  }[];
+};
+
+const About = ({ cards }: AboutProps) => {
   const { headline } = cards[0].fields;
   const { detail } = cards[0].fields;
   return (

pages/api/handler.tsx

@@ -1,4 +1,9 @@
-export default function handler(req, res) {
+interface Response {
+  status: (code: number) => Response;
+  json: (data: object) => void;
+}
+
+export default function handler(res: Response) {
   // Get data from your database
   res.status(200).json({ firstname: "lenny" });
 }

pages/blog/[slug].tsx

@@ -1,10 +1,27 @@
+import React from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Layout from "../../src/components/Layout/Layout";
 import { getAllPosts, getPostBySlug } from "../../src/utils/contentfulPosts";
 import { links } from "../../src/utils/links";
 
-const Post = ({ post }) => {
+type PostProps = {
+  post: {
+    fields: {
+      title: string;
+      date: string;
+      imageCover: string;
+      metaContent: {
+        fields: {
+          title: string;
+          metaDescription: string;
+        };
+      };
+    };
+  };
+};
+
+const Post = ({ post }: PostProps) => {
   const { title, date } = post.fields || {};
   const metaTitle = post.fields.metaContent.fields.title;
   const metaDescription = post.fields.metaContent.fields.metaDescription;
@@ -34,29 +51,42 @@ const Post = ({ post }) => {
 
 export default Post;
 
-export async function getStaticProps(context) {
-  const { slug } = context.params;
-  const post = await getPostBySlug(slug);
-
-  return {
-    props: { post },
-  };
+export async function getStaticProps(context: { params: { slug: string } }) {
+  try {
+    const { slug } = context.params;
+    const post = await getPostBySlug(slug);
+    return {
+      props: { post },
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      notFound: true,
+    };
+  }
 }
 
 export async function getStaticPaths() {
-  const res = await getAllPosts("posts");
-  const posts = res.map((p) => {
-    return p.fields;
-  });
+  try {
+    const res = await getAllPosts("posts");
+    const posts = res?.map((p) => {
+      return p.fields;
+    });
 
-  return {
-    paths: posts.map(({ slug }) => {
-      return {
-        params: {
-          slug,
-        },
-      };
-    }),
-    fallback: false,
-  };
+    return {
+      paths: posts?.map(({ slug }) => {
+        return {
+          params: {
+            slug,
+          },
+        };
+      }),
+      fallback: false,
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      notFound: true,
+    };
+  }
 }

pages/index.tsx

@@ -1,10 +1,20 @@
+import React from "react";
 import Head from "next/head";
 import Layout from "../src/components/Layout/Layout";
 import PostList from "../src/components/PostList/PostList";
 import { links } from "../src/utils/links";
 import { getAllPosts } from "../src/utils/contentfulPosts";
 
-const HomePage = ({ posts }) => {
+type HomePageProps = {
+  posts: {
+    date: string;
+    title: string;
+    slug: string;
+    imageCover: string;
+  }[];
+};
+
+const HomePage = ({ posts }: HomePageProps) => {
   const renderPosts = posts.map(({ date, title, slug, imageCover }) => (
     <PostList
       key={title + date}
@@ -38,7 +48,7 @@ export default HomePage;
 export async function getStaticProps() {
   try {
     const res = await getAllPosts("posts");
-    const posts = res.map((p) => {
+    const posts = res?.map((p) => {
       return p.fields;
     });
 

setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

src/components/Layout/Layout.test.tsx

@@ -5,7 +5,6 @@ import {
   screen,
   fireEvent,
 } from "@testing-library/react";
-import "@testing-library/jest-dom";
 
 import Layout from "./Layout";
 
@@ -24,7 +23,8 @@ describe("Layout", () => {
   ];
 
   it("renders without crashing", () => {
-    render(<Layout links={links} />);
+    const children = <div>Children</div>;
+    render(<Layout links={links}>{children}</Layout>);
   });
 
   beforeEach(() => {
@@ -33,8 +33,11 @@ describe("Layout", () => {
   });
 
   test("toggles the navigation", () => {
+    const children = <div>Children</div>;
     // assemble
-    const { getByText, container } = render(<Layout links={links} />);
+    const { getByText, container } = render(
+      <Layout links={links}>{children}</Layout>,
+    );
     expect(getByText("about")).toBeInTheDocument();
     expect(getByText("contact")).toBeInTheDocument();
     expect(container.querySelector(".wrap")).toBeInTheDocument();

src/components/Main/Main.tsx

@@ -1,4 +1,8 @@
-const Main = ({ children }) => {
+type MainProps = {
+  children: React.ReactNode;
+};
+
+const Main = ({ children }: MainProps) => {
   return (
     <main className="main" id="content">
       {children}

src/components/PageProfileCard/PageProfileCard.tsx

@@ -2,7 +2,12 @@ import Link from "next/link";
 import Image from "next/image";
 import Logo from "../../assets/logo.svg";
 
-const PageProfileCard = ({ twitterHandle, jobRole }) => {
+type PageProfileCardProps = {
+  twitterHandle: string;
+  jobRole: string;
+};
+
+const PageProfileCard = ({ twitterHandle, jobRole }: PageProfileCardProps) => {
   const handle = `https://twitter.com/${twitterHandle}`;
   return (
     <div className="card-container">

src/components/PostList/PostList.tsx

@@ -1,7 +1,14 @@
 import Link from "next/link";
 import Image from "next/image";
 
-const PostList = ({ date, title, slug, imageCover }) => {
+type PostListProps = {
+  date: string;
+  title: string;
+  slug: string;
+  imageCover: string;
+};
+
+const PostList = ({ date, title, slug, imageCover }: PostListProps) => {
   const newDate = new Date(date).toUTCString();
   const dateString = newDate.split(" ").slice(0, 4).join(" ");
   return (

src/utils/ErrorBoundry.test.tsx

@@ -10,9 +10,9 @@ describe("<ErrorBoundry/>", () => {
     const Greeting = () => {
       return <div>Hello World</div>;
     };
-    const FallbackComponent = (error) => <span>Error: {error.message}</span>;
+    const fallback = (error) => <span>Error: {error.message}</span>;
     const { getByText, unmount } = render(
-      <ErrorBoundary fallback={<FallbackComponent />}>
+      <ErrorBoundary fallback={fallback}>
         <Greeting />
       </ErrorBoundary>,
     );
@@ -27,9 +27,9 @@ describe("<ErrorBoundry/>", () => {
       throw new Error("Oh shit");
     };
 
-    const FallbackComponent = (error) => <span>Error: {error.message}</span>;
+    const fallback = (error) => <span>Error: {error.message}</span>;
     const { unmount } = render(
-      <ErrorBoundary fallback={<FallbackComponent />}>
+      <ErrorBoundary fallback={fallback}>
         <Greeting />
       </ErrorBoundary>,
     );