Next.js: サーバーレスネクスト： `next` dev-only依存関係を作成し、ビルドを小さくして起動を高速化するために` next-server`を導入します

フロントエンドのNow2.0で見られるコールドスタート時間は1.5秒で、画像サイズは80mbIIRCです。

NodeやV8、またはコールド評価にかなりの時間がかかる依存関係（ reactやreact-dom ）を変更せずに、 1にかなり近づけることができるはずです。

うわー、これは素晴らしいです！ ：o

うわー...それは素晴らしいです。

next-serverに関するいくつかの質問。

1. ライトエクスプレスサーバーになりますか？
2. はい、エクスプレスルートとnext-routesで構成できますか？

@ Nishchit14ビルドサイズを抑えようとしている場合は、 express追加しません。

next-routesはまだ問題なく動作すると確信しています。

したがって、ここで話しているのは、既存のサーバーを独自のパッケージに抽出することです。 したがって、以前と同じように機能しますが、nextをインポートする代わりに、next-serverをインポートします。

これはすごい！ 私と私が知っている他の人々は、スカンジウムを使用して（

1）パッケージサイズ。 Lambdaには50MBのハード制限があり、含まれているすべての開発ツールで簡単に近づけることができます。

2）コールドスタート。 Lambdaはいつでもより多くのサーバーを起動することを決定できるため、迅速な起動を行うことは非常に重要です。 既存のサーバーも最大4時間稼働するため、アプリケーションのライフサイクル全体を通じてコールドスタートが重要になります。

このイニシアチブを見てとてもうれしく、助けてくれてうれしいです！

これは素晴らしいアイデアです。Nuxt.jsでも同じです。 nuxt start -> nuxt-startを実行するために必要なコマンドなので、 nuxt-startと呼びます。

これに密接に従う。 可能であるが、何のためのデータポイントとしてwww.bustle.com <1秒コールドスタートとAWSラムダのSSRのpreactアプリです。 デプロイされた本番zipファイル全体は166kbです。 これがすべてのアプリケーションとライブラリのコードです。 Webpackはバンドルに使用されます。

@southpolesteveを共有していただきありがとうございます。 それはとても印象的です。 #goals

ユーザーケースはmicroとmicro-devに非常によく似ています。

同じ命名法を使用してみませんか？ nextおよびnext-dev

私はこの例を使用してnext.jsとサーバーレスをいじり回しており、今より小さなビルドを実行する方法があるかどうか興味があります。 本番環境では絶対に必要ではなく、サーバーレスやrepack-zipなどのパッケージャーの構成ファイルで除外できるnode_modulesのリストはありますか？

@Enalmada私はmaterial-uiです。規模の点ではかなり大きなアプリがありますが、Lambdaにアップロードするビルドzipは約45MBです。 どんなサイズをお探しですか？

@albinekb上記の166kbのsouthpolestevebustle.comの応答に触発され、この優れたチケットが完成するまで、ハックとしてdist除外ファイルに何を入れるかを知っていれば、「45MB」のどれだけが役に立たず、簡単に削除できるのだろうかと思います。 。

@albinekbラムダ用のJSをバンドルするために、webpack、parcel、またはrollupの使用を検討することを強くお勧めします。 サイズを節約できますが、通常のノード要求を介してファイルシステムにアクセスするのはかなり遅いため、起動時間も節約できます。

ZEIT Nowにデプロイしていて、高速コールドブートのためにイメージを小さく保ちたい場合は、Package Phobiaなどのツールを使用して、インストールする前にnpm依存関係のサイズを確認できます（または現在の依存関係のサイズを確認するだけです）。膨満感をカットする）。

readmeには、膨満感と戦うのに役立つ多くの同様のツールもあります。 ここでそれをチェックしてください： https ：

これは、次の7リリースで対処されるはずではありませんでしたか？ :(

今zeitにデプロイしていて、高速コールドブートのためにイメージを小さく保ちたい場合は、PackagePhobiaなどのツールを使用できます。

くそーantd： https ：//packagephobia.now.sh/result？p = antd

@Enalmadaおそらく、ライブラリ自体ではなく、antdの依存関係が原因です。 https://packagephobia.now.sh/result?p=%40material-ui%2Fcoreでそれを調べてい

これは、次の7リリースで対処されるはずではありませんでしたか？ :(

これを明確にするために、Next.js 7はサーバーレスNext.jsの基盤を築き、約5つのルートを削除し、本番環境に本当に必要なルートは2つだけにしました。

誰かがnext.jsをロールアップで動作させるようになったことがありますか？ 非常に近づいたように感じます... 60mのdistファイルでロールアップを実行すると、サイズが6mに減少しました。 残念ながら、distファイルは実際には起動しません。これは、ロールアップ中の警告であるnext.jsコードの単一の循環依存関係が原因であると思います。 誰かがnext.jsコードの循環依存関係を削除する可能性を検討できれば、私たちは皆、はるかに小さなビルドとより高速な起動に非常に近いかもしれません。
https://github.com/zeit/next.js/issues/5392

これに密接に従う。 可能であるが、何のためのデータポイントとしてwww.bustle.com <1秒コールドスタートとAWSラムダのSSRのpreactアプリです。 デプロイされた本番zipファイル全体は166kbです。 これがすべてのアプリケーションとライブラリのコードです。 Webpackはバンドルに使用されます。

@southpolesteveは、webpackバンドル構成の周りで何かを共有できますか？

@shauns残念ながら、私はもうBustleにいないので、見るためのコードがありません：/

@southpolesteve心配ありません！ 少なくともwebpackでその可能性を知っておくとよいでしょう。

次のサーバーに関するニュースをいただけますか？ 私は今月前にいくつかのコミットを見ました。

カナリアの枝を確認してください。

いつリリースする予定ですか？

現時点ではタイムラインを共有できません。

このように、このエラーを軽減するのに役立つ可能性があります。
https://spectrum.chat/zeit/general/unable-to-import-module-now-launcher-error~2662f0ba-4186-402f-b1db-2e3c43d8689a

着陸したばかり＃5927

@timneutkens nextをdevDependenciesに移動し、 next-serverを依存関係に追加する必要がありますか、それともbabelを介してこれを自動的に実行しますか？
https://github.com/zeit/next.js/blob/canary/packages/next/build/babel/plugins/next-to-next-server.ts

@ Skaronator ＃5927を使用して実装している場合は、.next/serverless/index.js必要とし（ require('./.next/serverless/index.js') ）、それをrenderメソッドと呼ぶことができます。

const page = require('./.next/serverless/index.js')

page.render(req, res)

これでページがレンダリングされ、応答が終了します

すごい！
私はこれを試していますが、awslambdaで動作させるのに問題があります。 誰かヒントはありますか？

カスタムエクスプレスサーバーはもう必要ないはずです。パスに基づいてサーバーレスファイルが必要になる可能性があります🤔

編集
これは機能しているようですが、ビルドステップを最適化する方法を確認するには、さらに深く掘り下げる必要があります。

const serverless = require("serverless-http");
const http = require('http');
const app = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => app.render(req, res))
app.prepare().then(() => {
    const handler = serverless(server, {
        binary: binaryMimeTypes
    });
    return handler(event, context, callback);
});

「カスタムサーバー」と「サーバーレス」を混同しているようです。APIは完全に分離されています。サーバーレスには準備するものがないため、 .prepareメソッドはありません。すぐに、ページをhtmlにレンダリングして、 renderが呼び出されたときの応答。

const serverless = require("serverless-http");
const http = require('http');
const page = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => page.render(req, res))
const handler = serverless(server, {
  binary: binaryMimeTypes
});
handler(event, context, callback);

確かに、上記のコードが機能した理由はわかりませんが（おそらくキャッシュだけでした）、 serverless-httpがhttp.Serverをサポートしていないようであるため、私のコードもコードも機能しませんeventオブジェクトは必要なレンダリングreqパラメータを置き換えることができないため、 page.render(req, res)返すことはできません。

また、express / koa / whateverは、この次の新機能の目的全体を壊してしまうため、使用したくありません。（ serverless-httpは依存関係がないため、使用しても問題ありません）

私はアイデアがありません：/

たぶんこれはあなたを助けるでしょう@guillaumebreuxhttps ：//github.com/zeit/now-builders/blob/master/packages/now-node-bridge/bridge.js

@timneutkensに感謝します、私はあなたの助けに感謝します。
しかし、現時点でも機能していません。まだ次のエラーがあります： typeError: Parameter "url" must be a string, not undefined

私はこのスレッドを汚染するのをやめて掘り続け、解決策を見つけたら例を書きます😄

少しわかりません。 このスレッドは、サーバーレスアプリと、必要なサーバー側のnpmパッケージがすべてWebpackされたプリコンパイル済みサーバーの2つのシナリオに適用されるようです。

このスレッドの最初のコメントのgifは、私が興味を持っている後者のシナリオを考慮しているようです。 next-serverを使用しているようですが、これはこのnpmパッケージである場合とそうでない場合があります。リポジトリが接続されておらず、GoogleまたはGitHub検索でリポジトリを見つけることができませんでしたが、バージョンタグの1つは8.0.0-canary.7（nextのバージョンタグ）であるため、適切なパッケージ。

私がこれまでに書いたものは正確ですか？ もしそうなら、それがカナリアにあるとしても、私がそれへの早期アクセスを得ることができる方法はありますか？

私の現在の解決策（明らかな理由で、私はprodで使用していません）は、 next.config.js config.externalsから関数を削除することです。 するように

私はnode_modulesの200メガバイトをインストールしてから、私の貧しい、小さな生産VM上で私が更新をプッシュするたびにコンパイルする2分を費やす必要がないように事前に構築されたサーバーを生産することができるのが大好きです。

*このプロジェクトはミッションクリティカルではないため、「prod」は大まかに使用されます。

これに密接に従う。 可能であるが、何のためのデータポイントとしてwww.bustle.com <1秒コールドスタートとAWSラムダのSSRのpreactアプリです。 デプロイされた本番zipファイル全体は166kbです。 これがすべてのアプリケーションとライブラリのコードです。 Webpackはバンドルに使用されます。

Next.js8サーバーレスターゲットのzipサイズはデフォルトで42Kbです😌

すごい！ これを楽しみにしています！

@dfoverdxとまったく同じ質問があります。 実行に必要なすべてのnode_modulesも含むサーバービルドを作成したいと思います。 Expressでカスタムサーバーを使用しているので、これらの依存関係がパッケージに含まれることは期待していませんが、サーバーにも_all_依存関係をインストールする必要があります（react、next、axios、...）。

これがデフォルトではないのかわかりませんか？
すべての依存関係をパッケージ化して最小化できると、サーバー側のパフォーマンスが大幅に向上するはずです。それとも、ここで完全に間違っているのでしょうか。

次のようにwebpack構成のexternalsセクションを上書きすると、ほとんどの依存関係が含まれます

module.exports = {
  webpack: (config, { dev }) => {
    config.externals = [];
    return config;
  })
};

ただし、reactとreact-domはサーバーに引き続き必要です。 それらも含める方法がわかりません...

残念ながら、現在のサーバーレスモードでカスタムサーバーを作成することはできません。 また、通常モードを使用する場合は、nextとそのすべての依存関係を含める必要があります。これは、.nextで生成された_app.jsが、たとえばnext / routerに依存しているためです。

非サーバーレスモードも次にバンドルされないのはなぜですか？

残念ながら、現在のサーバーレスモードでカスタムサーバーを作成することはできません。 また、通常モードを使用する場合は、nextとそのすべての依存関係を含める必要があります。これは、.nextで生成された_app.jsが、たとえばnext / routerに依存しているためです。

next 8以降、server.jsで「next」の代わりに「next-server」を要求できることに注意してください。これを行うと、ローカル開発中にホットリロードが失われるだけです。 理論的には、中間サーバーでCIビルドを実行し、Webpack関連の依存関係を本番インスタンスにコピーしない機能を提供します。 しかし、私たちのプロジェクトではまだ試していません。

@ElvenMonkyは1年以来このようなものを待っていますが、ドキュメントや例でこれについて何も見つかりませんでした。

@timneutkensこれを確認して

もしそうなら、私はそのような設定を試して、docs / examplesのPRを送るかもしれません。

next 8以降、server.jsで「next」の代わりに「next-server」を要求できることに注意してください。これを行うと、ローカル開発中にホットリロードが失われるだけです。

残念ながら、これは機能しません。

まず、サーバーターゲットでサーバーレスビルドを実行すると、次のメッセージが表示されてアクティブにブロックされます：「ターゲットがサーバーでない場合はサーバーを起動できません。https：//err.sh/zeit/next.js/next-start-serverless 」

次に、通常のビルドを実行することにした場合、ビルドファイルはnextパッケージから直接next/router ）。 これは、 nextとwebpackものがとにかく本番ビルドにある必要があることを意味します。

@ElvenMonky

next 8以降、server.jsで「next」の代わりに「next-server」を要求できることに注意してください。これを行うと、ローカル開発中にホットリロードが失われるだけです。

次は、ここに表示されているように、Babelプラグインとして内部的に実行しています。
https://github.com/zeit/next.js/blob/709850154754278d2fc86b987eebe1b3f0565255/packages/next/build/babel/plugins/commonjs.ts#L5 -L32

@sheerunは、＃7011でも述べたように、 next-transpile-modulesプラグインを使用してnextモジュールをトランスパイルすることにより、未解決のnext/router依存関係を排除できます。

ソリューションを説明するために、カスタムExpressサーバーの例をフォークして調整しました： https ：

PS：動的ルートや静的コンテンツの提供は言うまでもなく、私のアプリケーションにはTODOにリストされているすべてのものが必要であることに関係なく、私はまだ＃5927に本当に興奮しています。
幸いなことに、上記のソリューションはhttps://www.npmjs.com/package/next-serverlessカスタムサーバーセットアップでうまく機能し、前述の制限なしにAWSLambdaなどに次にデプロイできるようになります。

next 8以降、server.jsで「next」の代わりに「next-server」を要求できることに注意してください。これを行うと、ローカル開発中にホットリロードが失われるだけです。

私はこのアドバイスを使用していますが、残念ながらランタイム構成を使用できません。これには、 next/configが必要であり、 nextが必要です。

理由はわかりませんが、 require('next/config') 、次のバージョン8.0.3のnode_modulesにnextインストールされていなくても本番環境で機能していましたが、次のバージョン8.1.0では機能しません。

next / configをnext-runtime-configなどの別のパッケージに移動することは可能ですか？
またはnext-runtime-vars （next.config.jsとの混同を避けるためにconfigという用語を避けます）。

許容できる場合はお知らせください。PRを作成します。

こんにちは、みなさん！ この問題はNext.js8以降に実装されており、Next.js9でも引き続き発生しています。完了したらこれを閉じます。 😌

申し訳ありませんが、この問題と混同しました： https ：
ターゲットをチェックしていません：「サーバーレス」

一部の"next/*"は、次のように"next-server/*"に置き換えることができます。

• next / config-> next-server / config
• next / amp-> next-server / amp
• next / dynamic-> next-server / dynamic
• next / constants-> next-server / constants
• next / head-> next-server / head

しかし、この問題のOPで言及されているそのような最適化のサポートがないものがいくつかあります。

• next / router-> next-server / dist / lib / router / router（多分）？ （空であるか、サーバーで使用されている場合はエラーをスローする必要があります）
• 次へ/リンク？

サーバーにもインライン化されているので不要（AKAIK）

• 次へ/アプリ
• 次へ/ドキュメント
  

こんにちは、みなさん！ この問題はNext.js8以降に実装されており、Next.js9でも引き続き発生しています。完了したらこれを閉じます。

こんにちは@ Timer-サーブレスターゲットを参照していますか、それとも「next」を「next-server」に置き換えていますか？

nextをnextserverに置き換えると、packages.jsonの依存関係も更新されない限り、node_modulesフォルダーのサイズは変更されません。

どちらのアプローチの例もありますか？ サーバーレスの場合、私のユースケースはAWSLambdaにデプロイしています。

最初の号で概説したアプローチは、 serverlessターゲットに進化したため、それを使用することをお勧めします。

@timneutkens serverlessターゲットは、動的ルートを使用するカスタムサーバーの問題を解決せず、解決できません。 ＃5927動的に生成されたページ、アセットプレフィックス、カスタム_app、_document、_errを使用する必要がある私の場合のような多くの実際のビジネスアプリケーションのソリューションではありません。基本的に、TODOリストに記載されているすべてのものです。
next-serverは、webpackやbabelのような奇妙な開発のみの依存関係なしに、本番環境にデプロイするための部分的なソリューションを提供します。 ただし、これは、ここで説明しているいくつかのハックとウッドーダンスで行うことができます。

私はあなたがこの違いを理解しているという印象を受け、 @ rauchgによって説明されているように、いつか最初の問題に対してより堅牢な解決策を見たいと思ってい