Add missing types to blog example

solutions/blog/app/blog/[slug]/page.tsx

@@ -11,10 +11,16 @@ export async function generateStaticParams() {
   }))
 }
 
-export function generateMetadata({ params }) {
+type Props = {
+  params: {
+    slug: string
+  }
+}
+
+export function generateMetadata({ params }: Props) {
   let post = getBlogPosts().find((post) => post.slug === params.slug)
   if (!post) {
-    return
+    return {}
   }
 
   let {
@@ -51,7 +57,7 @@ export function generateMetadata({ params }) {
   }
 }
 
-export default function Blog({ params }) {
+export default function Blog({ params }: Props) {
   let post = getBlogPosts().find((post) => post.slug === params.slug)
 
   if (!post) {

solutions/blog/app/blog/utils.ts

@@ -26,19 +26,19 @@ function parseFrontmatter(fileContent: string) {
   return { metadata: metadata as Metadata, content }
 }
 
-function getMDXFiles(dir) {
+function getMDXFiles(dir: fs.PathLike) {
   return fs.readdirSync(dir).filter((file) => path.extname(file) === '.mdx')
 }
 
-function readMDXFile(filePath) {
+function readMDXFile(filePath: fs.PathOrFileDescriptor) {
   let rawContent = fs.readFileSync(filePath, 'utf-8')
   return parseFrontmatter(rawContent)
 }
 
-function getMDXData(dir) {
+function getMDXData(dir: fs.PathLike) {
   let mdxFiles = getMDXFiles(dir)
   return mdxFiles.map((file) => {
-    let { metadata, content } = readMDXFile(path.join(dir, file))
+    let { metadata, content } = readMDXFile(path.join(dir.toString(), file))
     let slug = path.basename(file, path.extname(file))
 
     return {

solutions/blog/app/components/mdx.tsx

@@ -1,10 +1,17 @@
 import Link from 'next/link'
-import Image from 'next/image'
-import { MDXRemote } from 'next-mdx-remote/rsc'
+import Image, { type ImageProps } from 'next/image'
+import { MDXRemote, type MDXRemoteProps } from 'next-mdx-remote/rsc'
 import { highlight } from 'sugar-high'
 import React from 'react'
 
-function Table({ data }) {
+type TableProps = {
+  data: {
+    headers: React.ReactNode[]
+    rows: React.ReactNode[][]
+  }
+}
+
+function Table({ data }: TableProps) {
   let headers = data.headers.map((header, index) => (
     <th key={index}>{header}</th>
   ))
@@ -26,34 +33,32 @@ function Table({ data }) {
   )
 }
 
-function CustomLink(props) {
+type CustomLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+function CustomLink(props: CustomLinkProps) {
   let href = props.href
 
-  if (href.startsWith('/')) {
-    return (
-      <Link href={href} {...props}>
-        {props.children}
-      </Link>
-    )
+  if (href?.startsWith('/')) {
+    return <Link href={href} {...props} />
   }
 
-  if (href.startsWith('#')) {
+  if (href?.startsWith('#')) {
     return <a {...props} />
   }
 
   return <a target="_blank" rel="noopener noreferrer" {...props} />
 }
 
-function RoundedImage(props) {
-  return <Image alt={props.alt} className="rounded-lg" {...props} />
+function RoundedImage(props: ImageProps) {
+  return <Image className="rounded-lg" {...props} />
 }
 
-function Code({ children, ...props }) {
-  let codeHTML = highlight(children)
+function Code({ children, ...props }: React.PropsWithChildren) {
+  let codeHTML = highlight(children?.toString() ?? '')
   return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
 }
 
-function slugify(str) {
+export function slugify(str: string) {
   return str
     .toString()
     .toLowerCase()
@@ -64,9 +69,9 @@ function slugify(str) {
     .replace(/\-\-+/g, '-') // Replace multiple - with single -
 }
 
-function createHeading(level) {
-  const Heading = ({ children }) => {
-    let slug = slugify(children)
+function createHeading(level: number) {
+  const Heading = ({ children }: React.PropsWithChildren) => {
+    let slug = slugify(children?.toString() ?? '')
     return React.createElement(
       `h${level}`,
       { id: slug },
@@ -99,7 +104,7 @@ let components = {
   Table,
 }
 
-export function CustomMDX(props) {
+export function CustomMDX(props: MDXRemoteProps) {
   return (
     <MDXRemote
       {...props}

solutions/blog/app/layout.tsx

@@ -36,7 +36,9 @@ export const metadata: Metadata = {
   },
 }
 
-const cx = (...classes) => classes.filter(Boolean).join(' ')
+type ClassName = Array<React.HTMLAttributes<HTMLHtmlElement>['className']>
+
+const cx = (...classes: ClassName) => classes.filter(Boolean).join(' ')
 
 export default function RootLayout({
   children,

solutions/blog/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,