Hello,
Hope this is very interesting question of scenario you might be facing to solve with next js and
- when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
- when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”
Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js“
First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!
export async function getStaticPaths() {
// Empty array since paths will be dynamically created in getStaticProps
return {
paths: [],
fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !!
};
};
Next, we need to edit our “getStaticProps” function and then voila;
export async function getStaticProps({ params }) {
const product = await getProduct(params && params.id);
if (!product) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: {
product,
error: resp.error ? true : false
}
};
}
Boom you are done, and just use those props in your page component like
return (<PhotoProvider
key={'photoprovider-key-' + product?.id}
speed={() => 600}
easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>
/*...other codes*/
</PhotoProvider>
you will find you page up and working, fine!
Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!
I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.
Happy Learning! Thanks for reading.
Keep coding & Develop Wonderful.
To Follow help out to know: uidevwork
