Issue with creating segmenter using MediaPipe runtime for TensorFlow Body Segmentation in Next.js project

Question

I'm following the tutorial for Body Segmentation with MediaPipe and TensorFlow.js. I am applying the tutorial steps into my NextJS project. When I try to create the segmenter with mediapipe runtime (runtime: 'mediapipe',), I get the following errors printed out in the developer tools console:

GET http://selfie_segmentation_solution_simd_wasm_bin.js/ - 404 (Not Found)
GET http://localhost:3000/selfie_segmentation.tflite - 404 (Not Found)
GET http://localhost:3000/selfie_segmentation.binarypb - 404 (Not Found)

But when I use runtime: 'tfjs',, no errors are caused. FYI, I have tried placing the selfie_segmenter.tflite file in different folder under my project including the public folder. This doesn't change anything! For reference, here is my code in index.tsx:

import { useEffect, useRef, useState } from 'react';
import '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-backend-webgl';
import * as bodySegmentation from '@tensorflow-models/body-segmentation';
import '@mediapipe/selfie_segmentation';
// import '@tensorflow/tfjs-converter';


export default function home() { 
  const [segmenter, setSegmenter] = useState<bodySegmentation.BodySegmenter | undefined>();
  
  async function createSegmenter() {
    console.log('creating segmeneter')
    const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation; // or 'BodyPix'


    setSegmenter(await bodySegmentation.createSegmenter(
      model, 
      {
        runtime: 'mediapipe', // or 'tfjs'
        modelType: 'general', // or 'landscape'
      },
    ));
    
    console.log('created the segmenter!');
  }

  useEffect(() => {
    if (segmenter == null) {
      createSegmenter();
    }
  });


  return <>
  <main>
    <h1>Hello</h1>
    
  </main>
  </>
}

If you need more information, please do let me know. Any help in resolving this issue would be greatly appreciated. Thank you!