[Next.js] リバースプロキシ対応とElectronへの組込

この記事はゆるプロ▼ Advent Calendar 2023の16日目の記事です。

備忘録的雑多な記事です。表題に関する2つのTipsを記載します。
簡単なものの、私は少しだけハマった箇所ではあるので、同様のシチュエーションがあった際の参考になればと思います。

環境

• Next.js 13 (App Router)
• Electron 26

Reverse Proxy

リバースプロキシでページを表示する

リバースプロキシでApp Routerで構築されたページを適切に表示したいことがあります。
例えば、nginxで以下のような設定の場合です。

location /foo/ {
  proxy_pass http://hoge:3000/;
}

このようなケースでは、next.config.jsにbasePathとassetPrefixを設定します。

端的にはbasePathはリンク要素などのURLが影響し、
assetPrefixはCSSなどのリソースのURLに影響します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/foo",
  assetPrefix: "/foo",
};

module.exports = nextConfig;

Electron

Electronでstatic exportしたページを表示する

ElectronのフロントエンドにNext.jsを利用する場合、SPA形式で利用できるようにすると実装しやすいかと思います。
ただし、以下のようなnext.config.jsによってstatic exportしたページをElectronで表示したい場合、index.htmlをただ通常表示するだけでは画面遷移などが上手くいきません。

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}
 
module.exports = nextConfig

このような場合、外部ライブラリを使うのが手っ取り早く、electron-serveを使うと上手くいきます。
以下にElectronでのウインドウの読込み時に利用する例を示します。

import serve from "electron-serve";

const loadURL = serve({ directory: "out" });

async function createWindow() {
  const win = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  await loadURL(win);
}