TypeError: Cannot read properties of null (reading 'default') in Next.js

Question

Earlier my Next.js application started throwing TypeError: Cannot read properties of null (reading 'default') without me changing anything in my code where I'm rendering some articles from our CMS.

Here is the complete log:

And here is my code:

import Image from "next/image";

export default function Articles({ articles }) {
  return (
    <div className="articles">
      {articles.map((article) => (
        <div className="article" key={article.id}>
          <div className="text">
            <h2>{article.title}</h2>
            <p>{article.content}</p>
          </div>
          <div className="image">
            <Image src={article.image} alt="" height={900} width={900} layout="responsive" />
          </div>
        </div>
      ))}
    </div>
  );
}

Youssouf Oumar · Accepted Answer · 2024-02-17 20:20:51Z

44

After some research, I found this GitHub discussion, then realized that a colleague has deleted the image of one of our articles from our CMS. If you ever come across this, the solution is to render the Image tag after a check, like so:

{ article.image ? <Image src={article.image} alt="" height={900} width={900} layout="responsive" /> : null }

edited Feb 17, 2024 at 20:20

answered Sep 1, 2022 at 13:25

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: Cannot read properties of null (reading 'default') in Next.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related