Hello everyone,
I want to generate thousands of product for a catalog which should be static without back-end.
I just start learning NextJs and have found How To instructions
https://www.mongodb.com/how-to/nextjs-with-mongodb/
I am interested in “Example 3” - static site generation
I could connect to the mongodb and fetch data for the top.js (as in example 3), everything works fine.
But I want also to generate every “movie”-page, but got stuck on it already for 2 days.
I have created a additional file [mid].js, here current code (after 20+ times rewritten)
Maybe some has an idea what to correct or can give a code example if its completely wrong.
Thank in advance
import { connectToDatabase } from "../util/mongodb";
import { Fragment } from "react";
function MovieDetailPage(props) {
const { loadedMovie } = props;
if (!loadedMovie) {
return <p>Loading...</p>;
}
return (
<Fragment>
<h1>{loadedMovie.title}</h1>
</Fragment>
);
}
export async function getStaticProps(context) {
const { params } = context;
const movieId = params.mid;
const data = await connectToDatabase();
const movie = data.movies.find((movie) => movie.id === movieId);
if (!movie) {
return { notFound: true };
}
return {
props: {
loadedMovie: movie,
},
};
}
export async function getStaticPaths() {
const data = await connectToDatabase();
const ids = data.movies.map((movie) => movie.id);
const pathsWithParams = ids.map((id) => ({ params: { mid: id } }));
return {
paths: pathsWithParams,
fallback: true,
};
}
export default MovieDetailPage;
