feat: enhance TypeScript support and update configuration files

- Added type definitions for the BlogCard component props.
- Updated tsconfig.json to include new libraries and strict null checks.
- Modified next-env.d.ts to reference additional Next.js navigation types.

components/blog/BlogCard.tsx

@@ -1,10 +1,19 @@
 import React, { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { Video } from '../Video'
+import type { Page, MdxFile } from 'nextra'
 import { Author } from '../Author/Authors'
+import { Video } from '../Video'
 
-const BlogCard = ({ page, handleTagClick, selectedTags = [] }) => {
+const BlogCard = ({
+  page,
+  handleTagClick,
+  selectedTags = [],
+}: {
+  page: MdxFile & Page
+  handleTagClick: (tag: string) => void
+  selectedTags?: string[]
+}) => {
   const router = useRouter()
   const [cardWidth, setCardWidth] = useState(0)
   const [maxDescriptionLength, setMaxDescriptionLength] = useState(160)
@@ -82,8 +91,8 @@ const BlogCard = ({ page, handleTagClick, selectedTags = [] }) => {
           <div>{truncateDescription(page.frontMatter?.description || '')}</div>
         </div>
         <div className="flex items-center justify-between absolute bottom-4 left-4 right-4">
-          <Author authorid={page.frontMatter.authorid} />
-          <span className="text-sm opacity-60">{page.frontMatter.date}</span>
+          <Author authorid={page.frontMatter?.authorid} />
+          <span className="text-sm opacity-60">{page.frontMatter?.date}</span>
         </div>
       </div>
     </div>

components/callouts/callout.tsx

@@ -43,7 +43,7 @@ export function Callout({
     setIsCollapsed(!isCollapsed)
   }
 
-  const [initialMaxHeight, setInitialMaxHeight] = useState(null)
+  const [initialMaxHeight, setInitialMaxHeight] = useState<number | null>(null)
 
   React.useEffect(() => {
     if (contentRef.current) {

components/tools/CredentialsGeneratorBox.tsx

@@ -3,7 +3,13 @@ import useCredentialsGenerator from './credentialsGenerator' // Adjust the path
 
 const CredsGenerator = () => {
   const { generateCredentials } = useCredentialsGenerator()
-  const [credentials, setCredentials] = useState(null)
+  const [credentials, setCredentials] = useState<{
+    CREDS_KEY: string
+    CREDS_IV: string
+    JWT_SECRET: string
+    JWT_REFRESH_SECRET: string
+    MEILI_KEY: string
+  } | null>(null)
   const [copyEnabled, setCopyEnabled] = useState(false) // State to track whether copy is enabled
   const [showTooltip, setShowTooltip] = useState(false) // State to track tooltip visibility
 

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

pages/_app.tsx

@@ -18,7 +18,7 @@ export default function App({ Component, pageProps }) {
   useEffect(() => {
     // Initialize PostHog
     if (typeof window !== 'undefined') {
-      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
         api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com',
         // Enable debug mode in development
         loaded: (posthog) => {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -16,19 +20,30 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": [
-    "next-env.d.ts",
+    "**/*.mdx",
     "**/*.ts",
     "**/*.tsx",
-    "**/*.mdx",
+    "components/NewsletterForm.js",
+    "components/tools/yamlChecker.tsx",
+    "next-env.d.ts",
+    "pages/api/subscribe.js",
     "utils/Subscriber.ts",
     "utils/dbConnect.js",
-    "pages/api/subscribe.js",
-    "components/NewsletterForm.js",
-    "components/tools/yamlChecker.tsx"
+    ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
-}
+  "exclude": [
+    "node_modules"
+  ]
+}