Next.jsでmp4ファイルを表示する方法について

Question

前提

初めまして。
Next.jsで背景に動画を表示しようとしています。
ローカル環境では下記の実装で再生できておりますが、デプロイすると500エラーが発生しております。
ご教示お願いします。

mp4ファイル保存場所
pablic/movies/sample.mp4

Mainvisual.ts

import {motion} from 'framer-motion'
import styles from './mainVisual.module.scss'

export const MainVisual = () => {
  return (
    <section id={styles.mainVisual}>
       <video autoPlay loop muted>
         <source src="/movies/sample.mp4" type="video/mp4"/>
       </video>
    </section>
  )
}
export default MainVisual

発生している問題・エラーメッセージ

Failed to load resource: the server responded with a status of 500 ()

試したこと

useRefを利用してuseEffectで再生してみるなど試しましたが特に変わりありませんでした。

import styles from './mainVisual.module.scss'
import {useEffect, useRef} from 'react';

export const Index_MainVisual = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    videoRef.current?.play();
  }, []);
  return (
    <section id={styles.indexMainVisual}>
      <video autoPlay loop muted ref={videoRef}>
        <source src="/movies/sample.mp4" type="video/mp4"/>
      </video>
    </section>
  )
}
export default Index_MainVisual

まとめ

上記の解消方法、またはNext.jsにて動画を表示するために利用されるライブラリなどありますでしょうか？
ご回答宜しくお願いします。

Answer 1

Vercelの静的ファイル配信は、大きなファイルに適さないため、別途S3やCloudinaryといった外部にアップロードすることをおすすめします。おそらくサイズ制限に引っかかっているはずです。

ちなみに、500エラーが発生した場合、VercelのFunction Logsという画面に詳細なログが表示されます。ご確認ください。