next on netlify
v3.0.1
Estamos desaprobando next-on-netlify complemento de Netlify's Essential Next.js Build. Visite este tema para obtener más información sobre la deprecación de next-on-netlify y hacer cualquier pregunta. También puede visitar nuestro Simple Migration Doc para obtener ayuda para la migración al complemento.
next-on-netlify es una utilidad para habilitar la representación del lado del servidor en Next.js en NetLify. Envuelve su aplicación en una pequeña capa de compatibilidad, para que las páginas puedan usar las funciones de Netlify para que se rendericen el lado del servidor.
getStaticPaths npm install --save next-on-netlify
Debemos construir nuestra aplicación Next.js como una aplicación sin servidor. Puede leer más sobre Serverless Next.js aquí.
Es súper simple. Simplemente cree un archivo next.config.js en la raíz de su proyecto y escriba lo siguiente:
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;Si se necesitan binarios en la implementación, se necesita la siguiente configuración (Prisma es un ejemplo):
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; El paquete Next-on-Netlify agrega el comando next-on-netlify . Cuando ejecutamos este comando, algo de magia prepara nuestra aplicación Next.js para alojar en Netlify*.
Queremos que el comando Next-on-Netlify se ejecute después de construir nuestra aplicación Next.js. Así que agregemos un gancho posterior al edificio a nuestro archivo paquete.json. Debe agregar "postbuild": "next-on-netlify" a los scripts existentes, como así:
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*Si tiene curiosidad sobre la "magia", consulte el archivo next-on-netlify.js bien documentado.
¡Casi hemos terminado! Solo tenemos que decirle a Netlify cómo construir nuestra aplicación Next.js, donde se encuentra la carpeta de funciones y qué carpeta cargar a su CDN. Lo hacemos con un archivo netlify.toml en la raíz de su proyecto y las siguientes instrucciones:
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " Nota: out_functions y out_publish están codificados en el siguiente en netlify. Estos no son configurables en este momento.
Si su proyecto contiene submódulos privados, para implementarlo, deberá:
Genere una clave de implementación en Netlify y agréguela a los submódulos relevantes para que puedan clonarse durante el proceso de implementación.
Asegúrese de que los remotos de submódulo estén configurados en formato SSH (es decir, [email protected]:owner/project.git , no https://... ). Dentro del directorio de submódulo, el control remoto GIT se puede actualizar con:
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.gitHemos terminado. Implementemos
Si no está familiarizado con NetLify, siga las instrucciones de implementación aquí: https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/
Le recomiendo que todavía use next dev para construir y obtener una vista previa de su aplicación localmente.
Pero si desea emular la implementación de NetLify en su computadora, también puede ejecutar next-on-netlify localmente y luego usar netlify-cli para obtener una vista previa del resultado.
Primero, instale la última versión de netlify-cli (también puede mirar paquete.json para ver la versión con la que se ha probado Next-on-Netlify)::
npm install -g netlify-cli Luego, agregue el siguiente bloque [dev] a su 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 " Por último, agregue las siguientes líneas a su .gitignore :
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/Ahora estás listo.
De ahora en adelante, siempre que desee obtener una vista previa de su aplicación localmente, simplemente ejecute:
npx next-on-netlify watch : Esto se ejecutará next build para crear su aplicación Next.js y next-on-netlify para preparar su aplicación Next.js para compatibilidad con NetLify. Cualquier cambio de código fuente activará otra compilación.netlify dev : esto emulará Netlify en su computadora y le permitirá obtener una vista previa de su aplicación en http://localhost:8888 .Nota:
El modo de vista previa aún no está disponible localmente, ejecutando netlify dev , para páginas estáticas sin revalidar o devolios. Esto será compatible pronto.
Por ahora, el modo de vista previa se admite en producción para todos los tipos de página Next.js.
Puede definir redireccionamientos personalizados en un _redirects y/o en su archivo netlify.toml . La precedencia de estas reglas es:
_redirectsnext-on-netlify Actualmente, no hay soporte para redirecciones establecidas en su archivo netlify.toml .
Lea más sobre redireccionamientos de Netlify aquí.
next-on-netlify crea una función netlify para cada una de sus páginas SSR y puntos finales de API. Actualmente, solo puede crear funciones de Netlify personalizadas utilizando @netlify/plugin-nextjs.
Si su página/ruta API Next.js termina en -background , se tratará como una función de fondo netlify. Nota: Las funciones de fondo solo están disponibles en ciertos planes.
Puede usar NetLify Identity con next-on-netlify . Para todas las páginas con representación del lado del servidor (GetInitialProps*, GetServerSideProps y Rutas API), puede acceder al objeto ClientContext a través del parámetro req .
Por ejemplo:
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 ;Para acceder a NetLify Identity desde páginas sin representación del lado del servidor, puede crear una siguiente ruta API que realice una lógica relacionada con la identidad:
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 } ) ;
}* Tenga en cuenta que las páginas que usan GetInitialProps solo se representan en el lado del servidor en la carga de la página inicial y no cuando el usuario navega por el lado del cliente entre páginas.
getStaticPaths Las páginas de respaldo se comportan de manera diferente con next-on-netlify que con Next.js. En Next.js, al navegar a una ruta que no se define en getStaticPaths , primero muestra la página de retroceso. Next.js luego genera el HTML en segundo plano y lo almacena en caché para futuras solicitudes.
Con next-on-netlify , al navegar a una ruta que no se define en getStaticPaths , IT Side Renders la página y la envía directamente al usuario. El usuario nunca ve la página de respaldo. La página no se almacena en caché para futuras solicitudes.
Para obtener más información sobre esto, ver: Problema #7
Nuestra solución existente para Next/Image no es muy desempeñada. Tenemos mejoras de rendimiento en nuestra hoja de ruta, dependiendo del trabajo interno.
Para obtener un mejor rendimiento ahora, recomendamos usar un proveedor de nubes como Cloudinary (consulte los documentos Next.js).
Este paquete es mantenido por Lindsay Levine, Finn Woelm y Cassidy Williams.
ShoutOut a @Mottox2 (un pionero de alojamiento de Next.js en Netlify) y @DanielCondemarin (autor de Server-Next.js para AWS). Los dos fueron grandes inspiraciones para este paquete.
? Gran "gracias" a las siguientes personas por sus contribuciones, apoyo y pruebas beta:
Los siguientes sitios están construidos con next-on-netlify :
OpinionAdreact.com (a través de Twitter)
Missionbit.org (#18)
gemini.com
bigbinary.com
¡Crea tu propio blog e implementa en Netlify!
¿Estás construyendo algo increíble con next-on-netlify ? Háganos saber y lo presentaremos aquí :)
