I have a simple Nex.js project using version 14.0.4. I am using MUI CSS to style following the documented setup: https://mui.com/material-ui/guides/nextjs/.
I have a layout.jsx file in root with the following configuration:
`// layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
export default function RootLayout(props) {
const { children } = props;
return (
<html lang="en">
<body>
<AppRouterCacheProvider>{children}</AppRouterCacheProvider>
</body>
</html>
);
}`
And inside the pages directory I have _app.js and _document.js:
`//pages/_app.js
import '../styles/globals.css'
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter'
import { ThemeProvider } from '@mui/material/styles'
import Home from '.'
import theme from '../components/theme'
function MyApp(pageProps) {
return (
<AppCacheProvider {...pageProps}>
<ThemeProvider theme={theme}>
<Home/>
</ThemeProvider>
</AppCacheProvider>
)
}`
export default MyApp
//_document.js import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter'; import { Html, Head, Main, NextScript } from 'next/document'; export default function MyDocument(props) { return ( <DocumentHeadTags {...props} /> ); }
MyDocument.getInitialProps = documentGetInitialProps;
In my index.js I am trying to access the props object from my component with an array that I obtain when processing the content of some files in my project directory. Everything is correct and I'm sure that getStaticProps saves my data array in the props, but I still get an undefined value if I access it from the component:
import fs from 'fs/promises';
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
import Header from '../components/Header'
export default function Home({latestComics}) {
console.log(latestComics)
return (
<>
<Header/>
<div className={styles.container}>
<main className={styles.main}>
<div>
{latestComics && latestComics.length > 0 ? (
latestComics.map((comic) => (
<Image key={comic.title} src={comic.img} alt={comic.title} />
))
) : (
<p>No comics available</p>
)}
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
</>
)
}
export async function getStaticProps(){
let comics = await fs.readdir('./comics')
comics = comics.slice(-8);
const promisesReadFiles = comics.map(async(file) =>{
const comicFile = await fs.readFile(`./comics/${file}`, 'utf-8');
return JSON.parse(comicFile);
})
const latestComics = await Promise.all(promisesReadFiles).catch(error => {
console.error(error);
throwerror; // Throws the exception to indicate that there is a problem.
});
console.log(latestComics)
return{
props: {
latestComics
}
}
}
I have tried deleting the .next folder from my project and building again with *npm run build* expecting to receive some kind of alert in the console, but it compiles successfully without any errors. I run the project again and continue to receive my latestComics prop as: undefined. Does AppCacheProvider or AppRouterCacheProvider have anything to do with this?