next on netlify下載 - next on netlify下載

next on netlify

Ai源碼

v3.0.1

下載

貶值下一個淨利式

我們正在棄用Netlify的Nectress Next.js Build插件next-on-netlify棄用。請訪問此問題，以了解有關next-on-netlify貶值的更多信息，並提出任何問題。您還可以訪問我們的簡單遷移文檔，以幫助遷移到插件。

構建插件 @netlify/plugin-nextjs
插件NPM軟件包

next-on-netlify是一個實用程序，用於在Netlify上的Next.js中啟用服務器端渲染。它將您的應用程序包裝在微小的兼容性層中，以便頁面可以使用netlify函數以呈現服務器端。

安裝
設定
- 1。將Next.js目標設置為無服務器
- 2。添加後建築鉤
- 3。 netlify配置
  - （可選）配置私人git子模型
演示
可選的額外功能
- 本地預覽
- 自定義NetLify重定向
- 自定義NetLify功能
- 背景功能
- 使用NetLify身份
警告
- 帶有getStaticPaths頁面的後備
- 下一個/圖像
學分
展示櫃

安裝

 npm install --save next-on-netlify

設定

1。將Next.js目標設置為無服務器

我們必須將下一個應用程序構建為無服務器應用程序。您可以在此處閱讀有關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" ,
} ;

2。添加後建築鉤

NEXT-NETLIFY軟件包添加了next-on-netlify命令。當我們運行此命令時，一些魔術恰好準備了我們的下一個命令。

我們希望下一個netlify命令在構建下一個js應用程序後運行。因此，讓我們將一個後建築鉤添加到我們的poffage.json文件中。您應該在現有腳本中添加"postbuild": "next-on-netlify" 。

 {
  "name": "my-nextjs-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "next-on-netlify"
  },
  ...
}

*如果您對“魔術”感到好奇，請查看已記錄的next-on-netlify.js文件。

3。 netlify配置

我們快要完成了！我們只需要告訴NetLify如何構建我們的下一個.js應用，功能文件夾的位置以及哪個文件夾上傳到其CDN。我們使用netlify.toml文件在您的項目的根和以下說明中做到這一點：

[ build ]
  command   = " npm run build "
  functions = " out_functions "
  publish   = " out_publish "

注意： out_functions和out_publish被硬編碼為nex-netlify。這些目前不可配置。

（可選）配置私人git子模型

如果您的項目包含私有子模型，為了部署它，您將需要：

在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/11/how-to-deploy-next.js-sites-sites-to-netlify/

演示

網站：https：//next-on.netlify.com/
代碼：https：//github.com/netlify-labs/next-on-netlify-demo

可選的額外功能

本地預覽

我建議您仍然使用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 build ，以構建您的下一個。 JS應用程序和next-on-netlify以準備您的Next.js應用程序，以與NetLify兼容。任何源代碼更改都會觸發另一個構建。
netlify dev ：這將模擬計算機上的Netlify，讓您在http://localhost:8888上預覽應用程序。

筆記：

預覽模式尚未在本地可用，即運行netlify dev ，對於沒有重新驗證或後備的靜態頁面。這將很快得到支持。

目前，所有Next.js頁麵類型的生產中都支持預覽模式。

自定義NetLify重定向

您可以在_redirects和/或netlify.toml文件中定義自定義重定向。這些規則的優先級是：

_redirects
next-on-netlify重定向

當前，在您的netlify.toml文件中不支持重定向。

在此處閱讀有關NetLify重定向的更多信息。

自定義NetLify功能

next-on-netlify為您的每個SSR頁面和API端點創建一個NetLify函數。當前，您只能使用 @netlify/plugin-nextjs創建自定義NetLify函數。

背景功能

如果您的Next.js API頁/路由以-background結束，則將其視為NetLify背景功能。注意：背景功能僅在某些計劃中可用。

使用NetLify身份

您可以將NetLify Identity與next-on-netlify一起使用。對於所有具有服務器端渲染（GetInitialProps*，getServersideProps和api路由）的頁面，您可以通過req參數訪問客戶端context對象。

例如：

 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 Identity，您可以創建一個執行與身份相關的邏輯的下一個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 } ) ;
}