.
└── myProject/
    ├── public/
    │   ├── images/
    │   │   └── ...
    │   └── mp4/
    │       └── nature.mp4
    └── src/
        ├── app/
        │   └── ...
        └── components/
            ├── ...
            └── MaskText/
                ├── index.jsx
                └── style.module.css

How can I import the “nature.mp4” into the MaskText index.jsx file? I attempted to use next-video but always receive “GET http://localhost:3000/public/mp4/nature.mp4 404”.

import { useRef, useEffect } from 'react';
import styles from './style.module.css';

export default function Index() {
    const container = useRef(null);
    const stickyMask = useRef(null);
    ...

    return (
        <div className={styles.maskTextContainer}>
            <div ref={container} className={styles.container}>
                <div ref={stickyMask} className={styles.stickyMask}>
                    <video src="public/mp4/nature.mp4"></video>
                </div>
            </div>
        </div>
    );
}

I tried to move the video into the folder MaskText, use absolute path, but still didn’t work.