next on netlify
v3.0.1
我们正在弃用Netlify的Nectress Next.js Build插件next-on-netlify弃用。请访问此问题，以了解有关next-on-netlify贬值的更多信息，并提出任何问题。您还可以访问我们的简单迁移文档，以帮助迁移到插件。
next-on-netlify是一个实用程序，用于在Netlify上的Next.js中启用服务器端渲染。它将您的应用程序包装在微小的兼容性层中，以便页面可以使用netlify函数以呈现服务器端。
getStaticPaths页面的后备 npm install --save next-on-netlify
我们必须将下一个应用程序构建为无服务器应用程序。您可以在此处阅读有关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命令在构建下一个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文件。
我们快要完成了！我们只需要告诉NetLify如何构建我们的下一个.js应用，功能文件夹的位置以及哪个文件夹上传到其CDN。我们使用netlify.toml文件在您的项目的根和以下说明中做到这一点：
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish "注意： out_functions和out_publish被硬编码为nex-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/11/how-to-deploy-next.js-sites-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 build ，以构建您的下一个。JS应用程序和next-on-netlify以准备您的Next.js应用程序，以与NetLify兼容。任何源代码更改都会触发另一个构建。netlify dev ：这将模拟计算机上的Netlify，让您在http://localhost:8888上预览应用程序。笔记：
预览模式尚未在本地可用，即运行netlify dev ，对于没有重新验证或后备的静态页面。这将很快得到支持。
目前，所有Next.js页面类型的生产中都支持预览模式。
您可以在_redirects和/或netlify.toml文件中定义自定义重定向。这些规则的优先级是：
_redirectsnext-on-netlify重定向当前，在您的netlify.toml文件中不支持重定向。
在此处阅读有关NetLify重定向的更多信息。
next-on-netlify为您的每个SSR页面和API端点创建一个NetLify函数。当前，您只能使用 @netlify/plugin-nextjs创建自定义NetLify函数。
如果您的Next.js API页/路由以-background结束，则将其视为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 } ) ;
}*请注意，使用getInitialProps的页面仅在初始页面加载上呈现服务器端，而不是在用户在页面之间导航客户端时。
getStaticPaths页面的后备next-on-netlify后备页面与Next.js的行为不同。在Next.js上，当导航到getStaticPaths中未定义的路径时，它首先显示后备页面。然后，next.js在后台生成HTML，并缓存它以供将来的请求。
使用next-on-netlify ，当导航到getStaticPaths中未定义的路径时，它的服务器端呈现页面并将其直接发送给用户。用户从未看到后备页面。该页面没有用于将来的请求。
有关此的更多信息，请参见：第7期
我们现有的下一个/图像解决方案不是很好。我们对路线图进行了绩效改进，取决于内部工作。
为了立即获得更好的性能，我们建议使用像Cloudinary这样的云提供商（请参阅Next.js文档）。
该包由Lindsay Levine，Finn Woelm和Cassidy Williams维护。
向 @mottox2（在netlify上托管Next.js的先驱）和@danielcondemarin（AWS的Serverless-Next.js的作者）喊叫。这两个是这个包装的巨大灵感。
？对以下人员的贡献，支持和Beta测试的大“谢谢”：
以下网站构建了next-on-netlify ：
discatedReact.com（通过Twitter）
missionbit.org（＃18）
gemini.com
bigbinary.com
创建自己的博客并部署以NetLify！
您是否正在使用next-on-netlify构建很棒的东西？让我们知道，我们将在这里介绍:)
