Next.js静的書き出しをFTPでレンタルサーバーに公開する手順

書き出したNext.jsサイトをVercelを使わず、レンタルサーバーで公開したい。そう考える人は多い。方法はある。next.config.jsにoutput: 'export'を指定すればいい。静的書き出しをおこない、生成されたoutフォルダをFTPまたはSFTPでレンタルサーバーへアップロードする。GitHub連携も自動デプロイの仕組みも要らない。ただしこの手順には落とし穴が二つある。out/_next/にアセットが溜まって表示が崩れる現象と、FTPサーバー特有のファイルパーミッションの挙動だ。原因と回避策を以下にまとめる。

Next.jsを静的サイトとして書き出す(output: 'export')

Next.js 14のApp Routerでも、静的書き出しは可能だ。next.config.jsに次の一行を加える。

module.exports = {
  output: 'export',
}

この設定があると、npm run buildを実行したときにoutフォルダが生成される。中身はHTMLとCSSとJavaScriptだけの静的ファイル一式。サーバー側でNode.jsを動かす必要はない。国内の主要なレンタルサーバーでも、そのままアップロードして公開できる。

なお、動的ルートやサーバー側の処理を使っている場合は静的書き出しに対応しない機能もある。事前にNext.jsの公式ドキュメントで対象範囲を確認しておきたい。

書き出したout/をFTP・SFTPでレンタルサーバーへアップロードする

書き出しが終わったら、FTPクライアントで接続する。ポートはSFTPなら22、FTPなら21だ。汎用のFTPクライアントソフトを使えばよい。アップロード先はpublic_htmlフォルダ。outフォルダそのものではなく、outフォルダの中身をpublic_htmlの直下へ上書きする。フォルダごと入れてしまうと、URLに/out/が入ってしまい正しく表示されない。

公開フローの中でGitHubは介在しない。使うとしてもバックアップと版管理のためで、公開作業そのものはローカルのビルドとFTPアップロードだけで完結する。標準的な流れは次の通り。

1. ローカルで内容を修正する
2. npm run buildを実行してoutフォルダを生成する
3. FTPクライアントでpublic_htmlへoutフォルダの中身を上書きアップロードする
4. 本番サイトをキャッシュ無効化した状態で確認する

ブラウザのキャッシュが残っていると、更新前の表示のままになることがある。確認時はスーパーリロードを使うとわかりやすい。

アップロード後に表示が崩れる原因は out/_next/ の残骸

公開後にレイアウトが崩れたり、スタイルが当たらなくなったりする不具合が起きることがある。原因の多くはout/_next/フォルダに残っている古いアセットだ。

Next.jsはビルドのたびにファイル名にハッシュを付与する。バージョンが変わるとファイル名も変わる仕組みだが、上書きアップロードでは古いファイルが自動で消えるわけではない。何度も改修を重ねたサーバー上には、新旧のアセットが入り混じって残ってしまう。

大きな改修をしたときは、サーバー側の_next/フォルダを一旦削除しておきたい。そのうえで新しいoutフォルダの中身をアップロードし直すと、古いアセットが残りにくい。小さな修正のたびに削除する必要はない。レイアウトが大きく変わるタイミングでは意識しておきたい。

.htaccessは既設のものを書き換えない

レンタルサーバーには.htaccessがすでに置かれていることが多い。HTTPSへのリダイレクトやgzip圧縮、キャッシュ設定などがまとめられている。これは通常、触らずそのまま残す。書き換えてしまうと、HTTPS強制やキャッシュ制御が意図せず外れてしまう恐れがある。

同様に.user.iniのようなPHP設定ファイルも、サーバー側の標準設定として温存しておくのが安全だ。レンタルサーバー契約直後のpublic_html直下には、初期ロゴ画像のような不要ファイルが置かれていることもある。これはサイトの表示に関係しないので、削除して構わない。ただし.htaccessと.user.iniは別扱いにしておく。

FTPアップロード先のファイルパーミッションで気をつけること

サーバーによっては、新しくアップロードしたファイルのパーミッションが604になることがある。所有者は読み書き可能、グループは権限なし、その他は読み取りのみという設定だ。一見不自然に見えるが、604でもその他ユーザーの読み取り権限は残っているため、HTTP配信そのものは問題なく機能する。

一方、既存ファイルを上書きアップロードした場合は、元のパーミッションがそのまま維持される。新規ファイルと既存ファイルで挙動が違う点は覚えておきたい。気持ち悪さが気になるなら、644に統一すればいい。FTPクライアントのパーミッション変更機能やサーバーのファイルマネージャを使えばできる。

---

静的書き出しとFTPアップロードは、Vercelのような自動デプロイに比べると手間がかかる。それでも仕組みはシンプルだ。ビルドしてアップロードするだけで、レンタルサーバー契約の範囲内で完結する。運用の手間と自由度、どちらを優先するかは更新頻度次第だろう。Web制作の実務はサービス紹介にまとめてある。技術面の記録はブログで公開している。