Can't pass data from getStaticProps to the NextPage component - reactjs

Question

I recieve properly the datas desired with getStaticProps. But I can't understand why they are not passed to the BlogPrivate component. I have exactly the same structure in another file, and it works just well...
articlesStrapi is always undefined
Here is the code
import React, { useEffect, useState } from 'react';
import { GetStaticProps, NextPage } from 'next';
import { ArticleStrapi } from '../../#types/next';
import Article from './article';
type articlesStrapiProps = { articlesStrapi: ArticleStrapi[] };
const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesStrapi }) => {
console.log(articlesStrapi); ==> return undefined
return (
<div style={{ display: 'flex', flexDirection: 'row' }}>
//////
</div>
);
};
export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
const { data } = await res.json();
const articlesFromStrapi: ArticleStrapi[] = data;
return !articlesFromStrapi
? { notFound: true }
: {
props: { articlesFromStrapi },
revalidate: 10 // In seconds
};
};
export default BlogPrivate;
there is the result of a console log of the articlesFromStrapi in the getStaticProps :
[
{
id: 1,
attributes: {
title: 'Article 1dgdrgdr',
createdAt: '2022-11-22T13:28:16.243Z',
updatedAt: '2022-11-22T18:02:50.096Z',
publishedAt: '2022-11-22T13:49:16.161Z',
content: 'dfdsf sdf ds '
}
},
{
id: 6,
attributes: {
title: 'fdsfdsf',
createdAt: '2022-11-22T18:01:47.759Z',
updatedAt: '2022-11-22T18:01:48.440Z',
publishedAt: '2022-11-22T18:01:48.438Z',
content: 'dsf sdf dsf dsf dsf dsf dsf dsf '
}
}
]
And here are my interfaces :
export interface ArticleStrapi {
id: string;
attributes: Article;
}
export interface Article {
title: string;
content: string;
createdAt: string;
publishedAt: string;
updatedAt: string;
}
Let me know if you see any mistake I could do...
Thanks :)

Answer 1

Well your data names are not equivalent.
The prop that the component gets is articlesStrapi and the prop that you're returning from getStaticProps is articlesFromStrapi.
Here is the correct code:
const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesFromStrapi }) => {
console.log(articlesFromStrapi); ==> return undefined
return (
<div style={{ display: 'flex', flexDirection: 'row' }}>
//////
</div>
);
}
Or by changing the prop name in getStaticProps:
export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
const { data } = await res.json();
const articlesFromStrapi: ArticleStrapi[] = data;
return !articlesFromStrapi
? { notFound: true }
: {
props: { articlesStrapi: articlesFromStrapi },
revalidate: 10 // In seconds
};
};