next on netlify
v3.0.1
NetlifyのEssential Next.jsビルドプラグインを支持して、 next-on-netlify非難しています。この問題にアクセスして、 next-on-netlify推奨について詳しく知り、質問をしてください。また、プラグインに移行する支援については、Simple Migration Docにアクセスすることもできます。
next-on-netlify netlifyのnext.jsでサーバー側のレンダリングを有効にするためのユーティリティです。アプリケーションを小さな互換性レイヤーにラップするため、ページはネットライフ機能を使用してサーバー側にレンダリングできるようにします。
getStaticPathsのページのフォールバック npm install --save next-on-netlify
next.jsアプリをサーバーレスアプリとして構築する必要があります。 ServerLess Next.jsの詳細については、こちらをご覧ください。
とてもシンプルです。プロジェクトのルートにnext.config.jsファイルを作成し、以下を書きます。
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;展開でバイナリが必要な場合、次の構成が必要です（Prismaは例です）。
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ;Next-netlifyパッケージはnext-on-netlifyコマンドを追加します。このコマンドを実行すると、Netlify*でホストするためにnext.jsアプリを準備するために魔法がたまたま。
Next.jsアプリケーションを構築した後、Next-netlifyコマンドを実行したいと考えています。 Package.jsonファイルにポストビルドフックを追加しましょう。 "postbuild": "next-on-netlify"既存のスクリプトに追加する必要があります。
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*「魔法」に興味がある場合は、よく文書化されたnext-on-netlify.jsファイルをチェックしてください。
私たちはほとんど終わりました！ Netlifyのneve.jsアプリの構築方法を指示するだけで、機能フォルダーが配置されているjsアプリと、CDNにアップロードするフォルダーを作成する必要があります。プロジェクトのrootと次の手順にnetlify.tomlファイルを使用して、次のようにします。
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish "注： out_functionsとout_publish 、Next-netlifyにハードコードされています。これらは現時点では構成できません。
プロジェクトにプライベートサブモジュールが含まれている場合、展開するには、次のことが必要です。
netlifyでデプロイキーを生成し、関連するサブモジュールに追加して、展開プロセス中にクローン化できるようにします。
サブモジュールリモートがSSH形式（IE [email protected]:owner/project.git 、 https://... ）に設定されていることを確認してください。サブモジュールディレクトリ内では、gitリモートを次のように更新できます。
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.git私たちは終わりました。展開しましょう
netlifyに慣れていない場合は、展開手順をこちらを参照してください：https：//www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/
next devを使用して、アプリケーションをローカルに構築およびプレビューすることをお勧めします。
ただし、コンピューターでのNetlifyの展開をエミュレートする場合は、 next-on-netlifyローカルで実行してから、 netlify-cliを使用して結果をプレビューすることもできます。
まず、 netlify-cliの最新バージョンをインストールします（package.jsonを調べて、Next-netlifyがテストされているバージョンを表示することもできます）：
npm install -g netlify-cli次に、次の[dev]ブロックをnetlify.tomlに追加します。
# netlify.toml
# [build]
# ...
[ dev ]
functions = " out_functions "
publish = " out_publish "
# We manually set the framework to static, otherwise Netlify automatically
# detects Next.js and redirects do not work.
# Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
framework = " #static "最後に、 .gitignoreに次の行を追加します。
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/今、あなたはすべて設定されています。
これからは、アプリケーションをローカルでプレビューしたいときはいつでも、実行するだけです。
npx next-on-netlify watch ：これにより、Next.jsアプリとnext-on-netlifyを構築するためにnext buildを実行して、Netlifyとの互換性のためにNext.jsアプリを準備します。ソースコードの変更がすべて別のビルドをトリガーします。netlify dev ：これにより、コンピューターのNetlifyをエミュレートし、 http://localhost:8888でアプリをプレビューできます。注記：
プレビューモードは、再検証またはフォールバックのない静的ページに対して、 netlify devを実行しているローカルでまだ使用できません。これはまもなくサポートされます。
現時点では、プレビューモードは、すべてのnext.jsページタイプの生産でサポートされています。
_redirectsおよび/またはnetlify.tomlファイルでカスタムリダイレクトを定義できます。これらのルールの優先順位は次のとおりです。
_redirectsnext-on-netlifyリダイレクト現在、 netlify.tomlファイルに設定されたリダイレクトのサポートはありません。
Netlify Redirectsの詳細については、こちらをご覧ください。
next-on-netlify SSRページとAPIエンドポイントごとに1つのNetlify関数を作成します。現在、 @netlify/plugin-nextjsを使用してカスタムNetlify関数のみを作成できます。
next.js APIページ/ルートが-backgroundで終了すると、Netlifyのバックグラウンド関数として扱われます。注：背景関数は、特定のプランでのみ利用できます。
Netlify Identityをnext-on-netlifyで使用できます。サーバー側のレンダリング（GetInitialProps*、GetServerSideProps、およびAPIルート）を備えたすべてのページについて、 reqパラメーターを介してClientContextオブジェクトにアクセスできます。
例えば：
const Page = ( ) => < p > Hello World! </ p > ;
export const getServerSideProps = async ( { req } ) => {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { identity , user } = context . clientContext ;
return {
props : { } ,
} ;
} ;
export default Page ;サーバー側のレンダリングなしでページからnetlify IDにアクセスするには、ID関連のロジックを実行する次のAPIルートを作成できます。
export default async function getUser ( req , res ) {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { user } = context . clientContext ;
// Respond with user object
res . json ( { user } ) ;
}* getInitialPropsを使用するページは、ユーザーがページ間でクライアント側をナビゲートするときではなく、初期ページのロードでサーバー側のみレンダリングされることに注意してください。
getStaticPathsのページのフォールバックフォールバックページはnext-on-netlifyのnext.jsの場合とは異なる動作を異なります。 next.jsでは、 getStaticPathsで定義されていないパスに移動するとき、最初にフォールバックページを表示します。次に、next.jsはバックグラウンドでHTMLを生成し、将来のリクエストのためにそれをキャッシュします。
next-on-netlify使用すると、 getStaticPathsで定義されていないパスに移動するときに、サーバー側がページをレンダリングし、ユーザーに直接送信します。ユーザーはフォールバックページを見ることはありません。このページは、将来のリクエストのためにキャッシュされていません。
詳細については、次のように参照してください。問題＃7
Next/Imageの既存のソリューションはあまりパフォーマンスがありません。内部作業に応じて、ロードマップにパフォーマンスの改善があります。
パフォーマンスを向上させるには、Cloudinaryなどのクラウドプロバイダーを使用することをお勧めします（Next.js Docsを参照）。
このパッケージは、Lindsay Levine、Finn Woelm、Cassidy Williamsによって維持されています。
@mottox2（netlifyでnext.jsをホストする先駆者）と@danielcondemarin（serverless-next.js for awsの著者）への叫び。この2つは、このパッケージの大きなインスピレーションでした。
？貢献、サポート、ベータテストについて、次の人々に大きな「ありがとう」：
次のサイトはnext-on-netlifyで構築されています。
OnivelatedReaCt.com（Twitter経由）
MissionBit.org（＃18）
gemini.com
bigbinary.com
独自のブログを作成して、NetLifyに展開してください！
next-on-netlifyで素晴らしいものを構築していますか？私たちに知らせてください、そして私たちはここでそれを特集します:)
