Next.js15をNetlifyにデプロイする方法及び選定理由
この記事は？
最近Next.js15(とHono)を使って新規アプリケーションの開発をしており、そのデプロイ先を何にするか？頭を悩ませていましたが、一旦Netlifyにデプロイするという方向で決まりました。この記事ではNext.js15をNetlifyにデプロイする方法となぜNetlifyなのか？を解説していきます。
Netlifyの選定理由
著者はAWSの経験が一番長く、得意でいうとAWSが良いですが、PoCであり最短でデプロイできればよかったので、一旦はすぐにNextをデプロイできる先の候補としてVercelかNetlifyあたりで考えていました。著者のブログもVercelに上がっている通り、Vercelでも問題はなかったのですが、Netlifyの良いところは無料で商用利用ができかつ、your-site-name.netlify.app形式であれば好きなサブドメインが取れることです。この記事では、NetlifyもVercelと同じように指定ができるので特に手順で難しいところはないですが、1箇所詰まった箇所があったのでシェアします。
Next.js15をNetlifyにDeployする手順
1. Next.js15のインストール
まずはNext.jsのアプリをインストールするために、
npx create-next-app@latest
を行なって以下のように好きな設定でNext.js15の初期アプリをインストールします。
✔ What is your project named? … next-netlify
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
Creating a new Next.js app in /Users/muratakaishou/chummy/next-netlify.
これは全部デフォルトで選んで問題ありません。
脱線するので省略しますが、Next.js15系からは新たなバンドラーとしてturbopackが選択できるようになり、従来のバンドラーと比べてバンドリングが比較的速くなることが知られています。
2. Netlify側での設定とデプロイ
1の手順を行うと以下の画像のようなディレクトリー構成になります。
このディレクトリー構成に基づいて、NetlifyのBuild Settingsを設定します。
私の記憶では以下の5箇所は手動で設定をする必要がありました。
それぞれ正しい設定になっている事を確認してください。
Runtime: **Next.js**
Base directory: **/**
Build command: **next build**
Publish directory: **.next**
Build Status: **Active**
RuntimeはNext.jsを指定します。著者は初めここの指定を忘れて画面が404になっていました。
Base directoryはビルドを行う地点でpackage.jsonやnext.config.jsと合わせてください。
Build commandはnext buildで、ビルドされたファイルの出力先ディレクトリになります。
Next.jsの場合、デフォルトで ".next" ディレクトリに生成されまして、
Netlifyはそのディレクトリの内容をホスティングを行っている形となります。
終わりに
著者はNext.js, ServerSide TypeScript, AWSなどの技術スタックを軸にして活動を行なっているエンジニアです。スタートアップからJTCまで経験があり、インフラの選定であったり、フルスタックな開発まで経験があります。アプリ開発のご相談も受け付けておりますのでご気軽にメッセージ下さい！
著者が伺ってきた感じ最近では生成AI系のご相談も多いですが、一般的なスポット的な技術的壁打ちから継続的な技術支援まで、なんでも受け付けています。
Discussion