Next.jsのプロジェクトをNetlifyにアップする

投稿日
Next.jsのプロジェクトをNetlifyにアップする

package.jsonに exportdeploy コマンドを追加

package.json
・・・
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "export": "next export",
  "deploy": "yarn run build && yarn run export"
},
・・・


deploy コマンドを実行すると /out/ にビルドしたファイルが書き出されるようになります。

outフォルダにビルドしたファイルが書き出される

Netlifyでプロジェクトを作成する

Netlifyで「Create a new site」を実行

「Basic Build Settings」に

  • Build command・・ yarn run deploy
  • Publish directory・・ out

を設定。

netlifyのプロジェクト作成時にyarn run deployを設定

この状態でDeploy Siteを押下します。

Netlifyでビルドの設定を変更する

既にNetlifyにプロジェクトを紐付けている場合は、
Settings > Build&Deploy のBuild settingsの「Edit settings」から変更します。

既存のプロジェクトの場合はEdit settingsから変更
  • Build command・・ yarn run deploy
  • Publish directory・・ out
プロフィール画像
Yuki Takara
都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。