Next.js で静的にエクスポートして普通のレンタルサーバーに置く場合

またまた自分用のメモ

パス問題

LPとかの場合、常にサブドメインとは限らないので、2階層目以降のディレクトリに置かないといけない場合もあるかもしれないっていう時には

next.config.js: CDN Support with Asset Prefix | Next.js

nextjs.org

next.config.js

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

って書いてあったんで、すでに書いてあったのもあったので結局こうなった

/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  assetPrefix: isProd ? "https://cdn.mydomain.com/hoge/fuga" : undefined,
};

module.exports = nextConfig;

画像の取り扱い

src/images に画像を置いてみて
index.tsx に

import logoImage from "@/images/vercel.svg";
console.log(logoImage);

とか書いちゃうと

とか取得できそうなんで

        <img
          src={logoImage["src"]}
          width={logoImage["width"]}
          height={logoImage["height"]}
          alt="logo:Vercel"
        />

って書くとちゃんと表示されるって感じでした。