Stack Exchange
Getting Minified React Errors in Next.js after deploying to Vercel
Error at URL - https://coding4u-project.vercel.app/
My API URL - https://backend-coding4u.vercel.app/api/blogs-categories-tags
enter image description here
Everything seems fine in local and production but I am getting these minified errors in my console.
My Code is -
Index.js
import Layout from "@/components/Layout";
import styles from "../styles/blogposts.module.css";
import { listBlogsWithCategoriesAndTags } from '../actions/blog';
import Card from '../components/blog/Card';
import { APP_DESCRIPTION, DOMAIN, APP_NAME } from "../config";

const Index = ({ blogs }) => {

    const showAllBlogs = () => {
    return blogs && blogs.map((blog, i) => (
            <article key={i} className={styles.box}>
                <Card blog={blog} />
            </article>
        )).slice(0, 9);
    }

    return (
        <>
            <Layout>

                <div className={styles.backImg}>
                    <br /><br />
                    <br /><br />

                    <section className={styles.topsection}>
                        <h1 className={styles.heading}>Talk is cheap. Show me the code</h1>
                        <p>It's not at all important to get it right the first time. It's vitally important to get it right the last time.</p>

                        <div className={styles.resizeimg0}></div>
                        <h1>The Best way to predict the future is to invent it.</h1>
                        <p>Good code is its own best documentation. As you're about to add a comment, ask yourself, How can I improve the code so that this comment isn't needed ?</p>
                    </section>

                    <section className={styles.latestposts}>
                        <h1 className={styles.latestpostheading} > Latest Post </h1>
                        <div className={styles.grid}>{showAllBlogs()}</div>
                        <br />
                        <br />
                    </section>
                </div>
            </Layout>
        </>
    );
}


export async function getStaticProps() {
    try {
        const data = await listBlogsWithCategoriesAndTags();
        return { props: { blogs: data.blogs }};
    } catch (error) {
        console.error("Error fetching data:", error);
        return { props: { blogs: [] }, };
    }
}

export default Index;

Card Component -
import Link from 'next/link';
import styles from "../../styles/blogs.module.css";
import { format } from 'date-fns';

const Card = ({ blog }) => {

    const showBlogCategories = blog =>
        blog.categories.map((c, i) => (
            <div className={styles.tagcatdisplay} key={i}>
                <Link href={`/categories/${c.slug}`} className={styles.category}>
                    {c.name}
                </Link>
            </div>
        ))

    const showBlogTags = blog =>
        blog.tags.map((t, i) => (
            <div className={styles.tagcatdisplay} key={i}>
                <Link href={`/tags/${t.slug}`} className={styles.category}>
                    {t.name}
                </Link>
            </div>
        ));

        
    const date = new Date(blog.date);
    const formattedDate = format(date, 'dd MMM, yyyy');

    return (
        <>
            <section className={styles.Fimage}>
                <img src={blog.photo} alt={blog.title} className={styles.images} />
            </section>
            <header><Link className={styles.headcolor} href={`/${blog.slug}`}><h2 className={styles.blogtitle}>{blog.title}</h2></Link></header>
                <section className={styles.dateauthor}>
                {formattedDate} &nbsp; by &nbsp;
                {blog.postedBy && blog.postedBy.name && blog.postedBy.username ? (
                    <Link href={`/profile/${blog.postedBy.username}`} className={styles.author}>
                        {blog.postedBy.name}
                    </Link>
                ) : (
                    <span>User</span>
                )}
            </section>

            <div className={styles.givepadding}>
                {showBlogCategories(blog)}
                {showBlogTags(blog)}

                <section>
                    <div className={styles.para}>{(blog.excerpt)}</div>      
                </section>
            </div>
        </>

    );
};

export default Card;

I am only getting this error after deploying and not in localhost.

Does this answer your question? Uncaught Error: Minified React error #425. Help me
