Next.js：テキストファイルを import して使う

以下の様に、テキストファイルの内容の取り出しを import で済ませたい場合です。
極端に大きなファイルで無ければ、起動時間に与える影響は少ないと思います。

Hello, world.
This is an example text file.
import example from "./example.txt";

export default async function Home() {
  return <pre>{example}</pre>;
}

設定方法

next.config.mjs に webpack の設定を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(txt)$/,
      type: "asset/source",
    });
    return config;
  },
};

export default nextConfig;

新規に .d.ts ファイルを作成し、テキストファイルの型宣言をしておきます。

declare module "*.txt"

webpack 5 より前はローダーの設定を追加するのが一般的だった様ですが、現在は Asset Modules が使用できて便利な様です。

参考：webpack – Asset Modules

コメント