Currently, I am developing a blog that retrieves data from Mongo Atlas. The blog is built using Next.js version 9.5.4 and is hosted on Vercel. The blog page utilizes static props and regeneration.
The data is fetched in JSON format and then stringified for processing.
return {
props: {
articles: JSON.parse(JSON.stringify(articles)),
},
Each blog post (referred to as articles) consists of a title, text, and a signature line with the author's name and publication date. Some articles include links while others feature one or two pictures. Here is the relevant portion of the code:
{articles.map((article) => (
<li key={article.id}>
<h2 className={styles.blogtitle} >{article.title}</h2>
<p className={styles.blogtext}>{article.text}</p>
<img src={article.image1} className={styles.blogimage} alt={article.alt1} ></img>
<img src={article.image2} className={styles.blogimage} alt={article.alt2} ></img>
<p>{""}
<a
href={article.link}
title={article.link}
target="_blank"
rel="noopener noreferrer" >
{article.link}
</a>
</p>
<p className={styles.bloginfos}>{article.author}, today at {article.date.slice(0,10)} - {article.date.slice(11,16)} h</p>
</li>
))}
After adding images and links, posts without corresponding content display empty lines for two images and one link. Upon inspection with the browser console, it appears that each list item receives:
<img class="nextGeneratedName1"> <img class="nextGeneratedName1">however, these elements are empty. Additionally, there is a p tag containing:
<a target="_blank" rel="noopener noreferrer"></a>
This behavior causes undesired empty space in the displayed content. It seems that Next.js automatically adds the image classes even when no content is present. The empty paragraph should not be rendered in HTML since it lacks both content and a specific class. For further reference, the entire project is available on GitHub. You can view the blog.js file here.