Menu
I am building tiny e-commerce site and have setup my index page to generate static props as well as my individual product page cause we don't have many products yet. Issue I am experiencing is very slow loading on every single user click as if I missed something crucial in how data fetching works in NextJS. So here are snippets below and full project can be found on: https://github.com/danieltosaba/framer-motion
INDEX PAGE
export default function Home({ blankets }: HomeProps) {
const classes = useStyles();
return (
<motion.div exit={{ opacity: 0 }} initial={{opacity: 0}} animate={{opacity: 1}}>
<div>
<Head>
<title>Framer Motion Transitions</title>
</Head>
<main>
<Grid container spacing={2}>
<Grid item xs={12}>
<h1>CHOOSE YOUR BLANKET</h1>
</Grid>
{blankets.map((blanket) => (
<Grid key={blanket.id} item xs={12} sm={6} lg={4}>
<Card>
<Link href="/product/[id]" as={`/product/${blanket.id}`}>
<a>
<img
src={blanket.imageUrl.cover}
alt={blanket.name}
className={classes.image}
/>
</a>
</Link>
</Card>
</Grid>
))}
</Grid>
</main>
</div>
</motion.div>
);
}
export const getStaticProps: GetStaticProps = async (ctx) => {
const response = await fetch(
"http://localhost:4001/blankets/"
);
const blankets = await response.json();
return {
props: { blankets },
};
};
PRODUCT PAGE
type ProductDetailsProps = Blanket;
export default function ProductDetails({ name, description, imageUrl, size, price }: ProductDetailsProps) {
let images = [];
imageUrl.url.forEach((img) => {
images.push({
original: img,
thumbnail: img,
});
});
return (
<motion.div
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<ImageGallery items={images} />
</Grid>
<Grid item xs={12} sm={6}>
<Paper elevation={0}>
<Card>
<CardContent>
<Typography variant="h4" gutterBottom>
{name}
</Typography>
<Typography variant="subtitle1">
Price: {price.small}
</Typography>
<Typography variant="body1" gutterBottom>
{description}
</Typography>
</CardContent>
</Card>
</Paper>
</Grid>
</Grid>
</motion.div>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
const id = context.params.id;
const response = await fetch(
`http://localhost:4001/blankets/${id}`
);
const blanket = await response.json();
return {
props: blanket,
};
};
export const getStaticPaths: GetStaticPaths = async () => {
const response = await fetch(
"http://localhost:4001/blankets/"
);
const blankets: Blanket[] = await response.json();
const paths = blankets.map((blanket) => {
return { params: { id: blanket.id.toString() } };
});
return {
paths,
fallback: false,
};
};
Any help is more than welcomed!!
752
After thoroughly reading documentation I found that
In development (next dev), getStaticPaths will be called on every request.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
