管理栄養士と個人開発者の夫婦ブログ

ABOUT
おまめ
にゃんちゅう
料理・栄養
プログラミング
雑記
デザイン
ホテル・お店
コスメ
ブログ運営

Next/exportで編集可能なHTMLは作れないけど、FTPでも納品できる

2021-07-24個人開発1826

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を納品するために3つのオプションを把握

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する必要があります。

この記事をシェアする

個人開発」のおすすめ記事も
読んでいってね!

Next/exportで編集可能なHTMLは作れないけど、FTPでも納品できる

2021-07-24 | おまめ

サムネやWEBデザインに使える!メッシュグラデーションまとめ

2021-07-10 | おまめ

FigmaでSVGを書き出してreact/typescriptでサクっと扱うSVGR

2021-02-14 | おまめ

Vercel + Contentful「Resource is limited」でデプロイできなくなった

2020-12-30 | おまめ

年内にもう一度読みたい!PM向けオススメ記事7選+α

2020-12-27 | おまめ

初心者がReact/Next.js + Vercelでブログ作るまで[1]

2020-11-14 | おまめ
おまめ
おまめ
夫。個人開発者・ブロガー・デザイナー。夫婦でサイドFIRE目指してます。