heroku nextjs

Herokuのnext.js

HerokuにReactベースのユニバーサルWebアプリを展開します。

このリポジトリからのデモの展開：
https://nextjs.herokuapp.com

カスタムノード/Expressサーバーがサポートされています。使用する：

• ノードAPIを次の/反応UIと組み合わせます
• カスタムURLルートを実装します

▶️次に、カスタムエクスプレスサーバーを使用します

必要

• ヘロク
  • コマンドラインツール（CLI）
  • 無料アカウント
• git
• node.js
• next.js

生産展開

次のアプリをローカルで動作させたら、パブリックアクセスのために展開できます。

1. npm startスクリプトを修正して、Webリスナー$PORTを設定します。

   このエントリをPackage.jsonにマージする：

   {
     "scripts" : {
       "dev" : " next " ,
       "build" : " next build " ,
       "start" : " next start -p $PORT "
     }
   }

   ♥ 2019年3月、Herokuは自動的にnpm run build実行を開始したため、古いheroku-postbuildスクリプトエントリは不要になりました。

2. アプリがGit Repoであることを確認し、ローカルのみのディレクトリを無視してください。

   git init
   (echo node_modules/ && echo .next/) >> .gitignore

3. Herokuアプリを作成します：

   heroku create $APP_NAME

4. 展開する：

   git add .
   git commit -m ' Next.js app on Heroku '
   git push heroku main 

   ♥ 2020年7月の時点で、Herokuはgit push heroku mainをサポートし、その使用を奨励しています。 「マスター」の支店名のサポートは、後方互換性のために引き続き利用可能です。

5. 「変更の展開：追加、コミット、プッシュ」を再度展開します。

カスタム構成

Next自体は、next.config.jsファイルを介したビルドおよびランタイム構成をサポートします。

Reactコンポーネント内で環境変数（Heroku config vars）を使用して、再構築は必要ありません！ process.envオブジェクトを使用して、サーバーの環境からnext.config.js値を設定するだけです。