Next.jsでvideoをimportする

publicディレクトリが使えないという制約があり、
Next.jsのコンポーネント内でmp4といった動画メディアをimportする必要がありました。
初期値は動画メディア用のloaderが設定されていないため、
import MOVIE from "../assets/movie.mp4" のようにimportすることができません。

解決策

next-videos - npm を利用します。 内部的にはfile-loaderで変換されているようです。

next.config.js を以下のように書き換えます。

// next.config.js

const withVideos = require("next-videos");

const nextConfig = {
 ...
};

module.exports = withVideos(nextConfig);

型定義で怒られたので定義します。

declare module "*.mp4" {
  const src: string;
  export default src;
}

これでvideo要素をimportし表示させることできるようになりました。

import Movie from "../assets/title.mp4";

export function Movie() {
  return  <video src={Movie} />
}