• ..

Figma

    相対パスな URL に静的ビルドした成果物を置く

    例えばhttps://example.com/gameという URL に成果物をアップロードするためにどこか/gameというディレクトリに置く必要があるとします。 その時に、デフォルト設定の成果物をアップロードしてしまうと、 NextJS は/_next/xxx.jsを読もうとしますが実際には/game/_next/xxx.jsである必要がある為読み込むことができません。

    そんな時には、next.config.jsassetPrefixを設定します。これで生成されるファイルの参照パスの頭に指定したパスを付けることができます。 また、一応NODE_ENV=productionを付けた時だけプレフィックスを付けるという設定にしています。 これは成果物をローカルで確認したい時にローカルサーバーを建てて見るだけで簡単にチェックできるようにするためです。(/game/_next/xxx.jsとかになるとそういうディレクトリ構造でサーバーを建てないと駄目で面倒)

    const isProd = process.env.NODE_ENV === 'production';
    module.exports = {
      assetPrefix: isProd ? 'https://example.com/game' : '',
    };

    package.jsonscriptsは以下のようにします。

    {
      "scripts": {
        "next.build": "next build",
        "next.export:prod": "NODE_ENV=production next export",
        "next.export:dev": "next export",
        "build:prod": "yarn next.build && yarn next.export:prod",
        "build:dev": "yarn next.build && yarn next.export:dev
      }
    }

    あとは適当なbuild.*を実行するといいと思います。

    yarn build:prod # 本番用ビルド
    yarn build:dev  # 確認用ビルド