How to build [mid].js with NextJs getStaticProps

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

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;
  1. You need to create file path like this. Not sure where did you put [mid].js
    Screen Shot 2021-07-16 at 5.55.19 PM

  2. In the [mid].js file, you need to change the address of the