FTPでHTML/CSS/JSを納品する案件にReact/Nextjsを使った結果、少し問題になりました。

Next.jsの Static HTML Export とは

サーバーがなくてもページを描画してくれる機能です。とっても低コストで便利。 そのおかげで、このブログもお世話になっているVercelやNetlifyでのホスティングが広まっているわけですね。

使い方は単純で、buildコマンドにexportを追加するだけ。 exportは最新のbuildがないと動かないため、こういった書き方に。

// package.json

"scripts": {
  "build": "next build && next export"
}

実行後、 out ディレクトリが生成され、HTML/CSS/JSが格納されます。

outを納品するために３つのオプションを把握

①exportPathMap によるURLの指定が必要です。

②HTML内の画像やCSSを絶対パスで指定する場合、配置先のURLを指定する必要があります。 そんな時は assetPrefix を使い、build時のURLを指定できます。 同様のURLをHTML内部でも使い回すために、envで指定しておくと便利です。

③また、URL末尾にスラッシュを強制したい場面もあります。 そんな時は、 trailingSlash オプションが必要になります。

詳細👉 nextjs日本語翻訳exportPathMap, trailingSlash

以下にコード例をまとめました。

// next.config.js

const prodUrl = 'https://google.com' // 配置先のURLを記載する
const localUrl = 'http://localhost:8080/' // 作業時はlocalにしておく
const baseUrl = prodUrl

module.exports = {
  env: {
    baseUrl: baseUrl, // processで使えるように指定
  },
  assetPrefix: baseUrl, // vercelで閲覧する際には不要
  trailingSlash: true, // スラッシュ強制
  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
    return {
      '/': { page: '/' },
      '/about/': { page: '/about' }, // スラッシュ強制したいのでpathにもスラッシュ入れる
    }
  },
}

// pages/index.js

const base = process.env.baseUrl

~略~
<a href={base} className="logo">
~略~

注意！Next/Exportで生成されたoutは編集不可

生成されたoutディレクトリを、そのままSFTPの案件で納品しましたが問題発生。 納品したoutディレクトリのHTMLテキストを編集しても反映されません。 SFTPやFTP接続って、エンジニア以外の人がHTML触って文言編集したりしましたよね。 それができません。

具体的に言うと、HTMLファイルにはテキストが置かれてますから、当然に編集可能に見えます。 しかし、編集しても反映されません。 なぜなら、outディレクトリに一緒に生成され圧縮された読解不能なJSが、リライトしているからです。

なので、編集が必要あれば、 元ファイルを編集してbuildする必要があります。