Next.jsをVercel以外で公開する方法(Git不要/Appルータ使用/Netlify)
2024.6.13
この記事は約2分で読めます
![Profile Pic](/static/b493b450435a7972074ba6d6f3a5ae3b/5aead/writer-pic-200x200.png)
この記事の筆者:三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
Vercel以外でNext.jsをデプロイ
Next.jsは開発元のVercelで公開するのがほぼデフォルトになっていますが、他のプラットフォームでもデプロイは可能です。
本記事ではその方法を、ドラッグ&ドロップで簡単に公開できるNetlifyを使って紹介します。
GitHubやGitLabなどへのコードのプッシュも不要です。
Next.jsをexportするコード
Vercel以外で公開するには、buildとexportという作業を、あらかじめ手元のコンピューター内で行う必要があります。
exportを行う下記コードをnext.config.mjs
に追加しましょう。
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export", // 追加
};
export default nextConfig;
保存します。
次にターミナルでbuildを行う下記コマンドを実行してください。
npm run build
するとout
フォルダが作られます。
このフォルダをNetlifyやNetlify Dropなどに直接ドラッグ&ドロップすれば公開完了です。
Netlify Drop: https://app.netlify.com/drop
Next.jsをexportすると画像が表示されない
さて、公開されたサイトを確認すると、画像が正しく表示されていないかもしれません。
next/image
の<Image>
を使って表示させている画像です。
これは<Image>
の画像最適化がexport時には機能しないためです。
この解決には2つの方法があり、ひとつ目はCloudinaryなどの外部サービスで画像最適化を行う方法、ふたつ目が画像最適化をしない方法です。
簡単に済むのはふたつ目なので、<Image>
の画像最適化をオフにする下記コードをnext.config.mjs
に追加してください。
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
// ↓追加
images: {
unoptimized: true,
}
// ↑追加
};
export default nextConfig;
保存後、再びnpm run build
を実行してout
フォルダをドラッグ&ドロップすると、画像が表示されます。
Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。
最新のNext.js Appルータとともに、API(Route Handlers)、MongoDB、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
![Profile Pic](/static/b493b450435a7972074ba6d6f3a5ae3b/5aead/writer-pic-200x200.png)
メルマガ配信中
(from 三好アキ/エンジニア)
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)