本記事から得られること
- Next.jsでbuild時に静的ファイルを出力させる方法
- build時にenvファイルを読み込ませる方法
- image loaderの使い方
こんな人向け
- Next.jsでフロントエンドを作成しており、S3へ静的Webホスティングを行いたい人
- build時に環境変数が読み込まれず、undefinedになって苦しんでいる人
- S3にファイルをアップロードしたものの、画像が上手く出力されない人
自己紹介 🧑💻
最近AWSを本格的に触り始めたnaokiです。
案件に入りながら自社（SES）サービスの立ち上げメンバーとして、PM兼テックリードとしてMVP開発を進めています。
今回、MVPのフロントエンドをS3にWebホスティングを行うことになり、静的ファイルを出力する際に苦戦したので、方法と詰まった箇所を書き留めておこうと思います。
技術スタック(バージョン)
Next.js: 15.1.4
TypeScript: 5.8.3
npm: 11.1.0
node: 22.11.0
内容
1. 静的ファイルの出力設定をする
next.config.jsを開き、以下のように設定します。
const nextConfig = {
output: 'export',
trailingSlash: true
}
module.exports = nextConfig
もしくは、
const nextConfig = {
output: 'export' as const,
trailingSlash: true
}
module.exports = nextConfig
と設定します。
2つの設定事項については以下の通りです。
output: 'export' -> 静的ファイルを出力するために必要な設定
trailingSlash: true -> パスに階層がある場合に必要な設定
これらの設定を行うと、npm run build で静的ファイルが出力されるようになります。
2. 画像の最適化を行う
S3にファイルをアップロードした後、画像が反映されない事象が発生しました。
反映されなかった画像は、next/imageを用いたImageコンポーネントを用いているもののみで、解決するには画像の最適化を行う必要がありました。
以下、公式ドキュメントを引用します。
Image Optimization through next/image can be used with a static export by defining a custom image loader in next.config.js.
つまり、next.config.jsでimage loaderの設定を行うことで表示させることができます。
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
loader: 'custom',
loaderFile: './my-loader.ts',
},
}
module.exports = nextConfig
今回開発していたサービスのディレクトリ構成は以下のようになっていました。
frontend
├─ src
| └─app
├─ ...
└─ next.config.js
app配下にimage loaderのファイルを置きたかったので、以下のように設定しました。
const nextConfig = {
output: 'export' as const,
trailingSlash: true,
images: {
loader: 'custom' as const,
loaderFile: 'src/app/image-loader.ts',
},
};
image-loader.ts (参考)
export default function imageLoader({
src,
width,
quality,
}: {
src: string;
width: number;
quality?: number;
}) {
// 画像のパスがすでに完全なURLの場合はそのまま返す
if (src.startsWith('http')) {
return src;
}
// それ以外の場合は、width と quality パラメータを追加
return `${src}?w=${width}&q=${quality || 75}`;
}
そして、Imageコンポーネントを用いている箇所で読み込ませます。(参考)
import imageLoader from '@/app/image-loader';
/** 省略 **/
<Image
loader={imageLoader}
src='/images/header/register.png'
alt='登録'
width={20}
height={20}
/>
これで画像が最適化された状態で出力できるようになります。
3.(環境変数を用いている場合) env内の環境変数を読み込ませる
2まで行った後にS3にファイルをアップロードしたのですが、環境変数が上手く読み込まれない問題が発生しました。
環境変数が読み込まれない原因は、build時に.envが弾かれていることが原因です。
npmパッケージのenv-cmdで解決する流れはこちらから↓
その他参考記事
終わりに
ここまで読んでいただき、ありがとうございました！
今回は、Next.jsの静的ファイル出力や画像最適化、環境変数の罠について、実際に詰まった経験をもとにまとめてみました。同じようにハマっている方の助けになれば嬉しいです。もし「ここが分からない」「こうしたらもっと良くなったよ」などあれば、ぜひコメントやフィードバックをもらえると励みになります！