Some errors are resolved

Author: Amanuel-Abera

app/(profile)/create-post/[[...blogid]]/page.tsx

@@ -30,7 +30,13 @@ const placeholderValues: placeholderValuesType = {
   blogTags: []
 }
 
-const CreateBlog = ({params}:{params:{blogid:string}}) => {
+type CreateBlogProps = {
+  params: Promise<{
+      blogid?: string | string[] | undefined;
+  }>;
+};
+
+const CreateBlog = ({ params }: CreateBlogProps) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [action, setAction] = useState<string>('');
@@ -41,17 +47,17 @@ const CreateBlog = ({params}:{params:{blogid:string}}) => {
   const [blogid, setBlogid] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchBlogId = async () => {
-      
-      const resolvedBlogId = await params.blogid[0] ;  
-      console.log(resolvedBlogId);
-      
-      setBlogid(resolvedBlogId);
+    const resolveParams = async () => {
+        const resolvedParams = await params;
+        const resolvedBlogId = Array.isArray(resolvedParams.blogid)
+            ? resolvedParams.blogid[0]
+            : resolvedParams.blogid;
+        setBlogid(resolvedBlogId || null);
     };
 
-    fetchBlogId();
-  }, [params]);
-  // const blogid = params.blogid?.[0];
+    resolveParams();
+  }, [params]); 
+  
   const [state, formAction] = useActionState(blogid ? UpdatePost : CreatePost, initialState);
 
   useEffect(() => {

app/(profile)/dashboard/page.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { FetchBlog } from '@/utils/profileActions';
 import { format } from 'date-fns';
 import DeleteBlogBtn from '@/components/DeleteBlogBtn';
@@ -57,7 +56,7 @@ const Dashboard = async() => {
                   <td className="tableBorder px-4 py-2">
                     <div className="flex gap-4 items-center text-sm">
                       <div className="w-8 h-8">
-                        <Image
+                        <img
                           src={blog.blogCover}
                           alt="Blog Image"
                           width={40}

app/blog/[id]/page.tsx

@@ -2,7 +2,13 @@ import { getBlog } from '@/utils/getBlog';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 
-const ReadBlog = async ({params}:{params:{id:string}}) => {
+interface ReadBlogProps {
+  params: Promise<{
+    id: string;
+  }>
+}
+
+const ReadBlog = async ({ params }: ReadBlogProps) => {
   const {id} = await params;
   const blog = await getBlog(id);
 

components/AllBlogs.tsx

@@ -4,7 +4,7 @@ import { Blog } from "@/utils/types";
 
 const AllBlogs = ({allBlogs}:{allBlogs:Blog[]}) => {
   return (
-    <div className="w-11/12 mx-auto max-w-7xl mt-16 mb-20 sm:mt-8">
+    <div className="w-11/12 mx-auto max-w-7xl mt-8 sm:mt-0 mb-20">
         <h1 className="text-xl mb-4">All blog posts</h1>
         <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3">
             {

components/SingleCard.tsx

@@ -1,66 +1,3 @@
-// import Image from "next/image"
-// import Link from "next/link"
-// import Tags from "@/components/Tags"
-// import { format } from 'date-fns';
-// import { MdOutlineArrowOutward } from "react-icons/md";
-
-// interface User {
-//     firstName: string;
-//     lastName: string;
-//   }
-  
-//   interface Tag {
-//     id: string;
-//     name: string;
-//   }
-  
-//   interface BlogTag {
-//     id: string;
-//     tagId: string;
-//     blogId: string;
-//     tag: Tag; // Add the nested tag structure
-//   }
-  
-//   interface Blog {
-//     id: string;
-//     blogName: string;
-//     hook: string;
-//     blogCover: string;
-//     blogCoverPublicId?: string | null;
-//     desc: string;
-//     status: boolean;
-//     createdAt: Date;
-//     updatedAt?: Date;
-//     userId: string;
-//     user: User;
-//     blogTags: BlogTag[];
-//   }
-
-// const SingleCard = ({blog}:{blog:Blog}) => {
-    
-//   return (
-//         <Link href={`/blog/${20}`}>
-//             <div className="w-full mb-4">
-//                 <Image src={`${blog?.blogCover}`} className="w-full h-full object-cover" width={800} height={300} alt="blog 1"/>
-//             </div>
-//             <div>
-//                 <p className="para text-xs">{blog?.user?.firstName}&nbsp;{blog?.user?.lastName}+{format(new Date(blog?.createdAt), 'dd MMM yyyy')}</p>
-//                 <div className="flex justify-between my-2">
-//                     <h1 className="truncate text-xl font-bold w-4/5" title={`${blog?.blogName}`}>{blog?.blogName}</h1>
-//                     <span className="text-2xl font-extrabold"><MdOutlineArrowOutward /></span>
-//                 </div>
-//                 <p className="text-xs cardPara mb-4">{blog?.hook}</p>
-//                 <Tags tags={blog.blogTags} />
-
-//             </div>
-//         </Link>
-//   )
-// }
-
-// export default SingleCard
-
-
-import Image from "next/image";
 import Link from "next/link";
 import Tags from "@/components/Tags";
 import { format, isValid } from "date-fns";
@@ -89,9 +26,9 @@ const SingleCard = ({ blog }: { blog: Blog }) => {
   return (
         <Link href={`/blog/${blog?.id}`} className="w-full grid grid-cols-6 gap-2 h-auto max-w-full">
         <div className="w-full overflow-hidden col-span-6">
-            <Image
+            <img
             src={imageSrc}
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover max-h-96"
             width={800}
             height={300}
             alt={`${blog?.blogName}`}

components/verticalCard.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image"
 import Link from "next/link"
 import Tags from "@/components/Tags"
 import { format, isValid } from "date-fns";
@@ -25,13 +24,12 @@ const VerticalCard = ({blog}:{blog:Blog}) => {
     <div className="w-full">
     <Link href={`/blog/${blog?.id}`} className="w-full grid grid-cols-6 gap-2 h-40">
         <div className="w-full overflow-y-hidden mb-4 col-span-2">
-            <Image 
+            <img 
                 src={imageSrc} 
                 className="w-full h-full object-cover" 
                 width={800} 
                 height={300} 
                 alt={`${blog?.blogName}`}
-                priority
             />
         </div>
         <div className="col-span-4">

next.config.ts

@@ -3,7 +3,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   experimental: {
     serverActions: {
-      bodySizeLimit: "1000mb", 
+      bodySizeLimit: "1000mb", // Set body size limit for server actions
     },
   },
   images: {
@@ -17,8 +17,21 @@ const nextConfig: NextConfig = {
         hostname: "images.unsplash.com",
       },
     ],
+    minimumCacheTTL: 60, // Cache images for at least 60 seconds
+  },
+  async headers() {
+    return [
+      {
+        source: "/_next/image",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable", // Cache image optimizations
+          },
+        ],
+      },
+    ];
   },
-  /* other config options here */
 };
 
 export default nextConfig;