next on netlify
v3.0.1
Nous déprécions next-on-netlify en faveur du plugin de construction Essential Next.js de Netlify. Veuillez visiter ce problème pour en savoir plus sur la dépréciation de next-on-netlify et poser des questions. Vous pouvez également visiter notre DOC de migration simple pour une assistance en migration vers le plugin.
next-on-netlify est un utilitaire pour activer le rendu côté serveur dans next.js sur netlify. Il enveloppe votre application dans une minuscule couche de compatibilité, afin que les pages puissent utiliser les fonctions Netlify pour être rendue côté serveur.
getStaticPaths npm install --save next-on-netlify
Nous devons créer notre application Next.js en tant qu'application sans serveur. Vous pouvez en savoir plus sur Serverless Next.js ici.
C'est super simple. Créez simplement un fichier next.config.js à la racine de votre projet et écrivez ce qui suit:
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;Si des binaires sont nécessaires dans le déploiement, la configuration suivante est nécessaire (Prisma est un exemple):
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; Le package à net-netlify ajoute la commande next-on-netlify . Lorsque nous exécutons cette commande, une magie se trouve pour préparer notre application Next.js pour l'hébergement sur netlify *.
Nous voulons que la commande net-on-netlify s'exécute après avoir construit notre application Next.js. Ajoutons donc un crochet post-constructeur à notre fichier package.json. Vous devriez ajouter "postbuild": "next-on-netlify" aux scripts existants, comme ainsi:
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
* Si vous êtes curieux de savoir le "Magic", consultez le fichier bien documenté next-on-netlify.js .
Nous avons presque fini! Nous devons juste dire à NetLify comment créer notre application Next.js, où se trouve le dossier Functions, et quel dossier télécharger sur son CDN. Nous le faisons avec un fichier netlify.toml à la racine de votre projet et les instructions suivantes:
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " Remarque: out_functions et out_publish sont codées en dur dans le réseau à NET. Ceux-ci ne sont pas configurables pour le moment.
Si votre projet contient des sous-modules privés, afin de le déployer, vous devrez:
Générez une clé de déploiement dans Netlify et ajoutez-le aux sous-modules pertinents afin qu'ils puissent être clonés pendant le processus de déploiement.
Assurez-vous que les télécommandes sous-modules sont définies au format SSH (c'est-à-dire [email protected]:owner/project.git , pas https://... ). À l'intérieur du répertoire du sous-module, la télécommande GIT peut être mise à jour avec:
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.gitNous avons fini. Déployons
Si vous n'êtes pas familier avec Netlify, suivez les instructions de déploiement ici: https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/
Je vous recommande toujours d'utiliser next dev pour créer et prévisualiser votre application localement.
Mais si vous souhaitez imiter le déploiement Netlify sur votre ordinateur, vous pouvez également exécuter next-on-netlify localement, puis utiliser netlify-cli pour prévisualiser le résultat.
Tout d'abord, installez la dernière version de netlify-cli (vous pouvez également consulter Package.json pour voir la version contre laquelle NEXT-ON-NETLIFY a été testée):
npm install -g netlify-cli Ensuite, ajoutez le bloc [dev] suivant à votre 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 " Enfin, ajoutez les lignes suivantes à votre .gitignore :
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/Maintenant, vous êtes prêt.
À partir de maintenant, chaque fois que vous souhaitez prévisualiser votre application localement, il suffit d'exécuter:
npx next-on-netlify watch : Cela exécutera next build pour créer votre application Next.js et next-on-netlify pour préparer votre application Next.js pour la compatibilité avec NetLify. Toute modification du code source déclenchera une autre version.netlify dev : Cela imitera Netlify sur votre ordinateur et vous permettra de prévisualiser votre application sur http://localhost:8888 .Note:
Le mode d'aperçu n'est pas encore disponible localement, exécutant netlify dev , pour des pages statiques sans revalide ni se repliant. Cela sera bientôt pris en charge.
Pour l'instant, le mode d'aperçu est pris en charge dans la production pour tous les types de pages suivants.
Vous pouvez définir des redirects personnalisés dans un _redirects et / ou dans votre fichier netlify.toml . La priorité de ces règles est:
_redirectsnext-on-netlify Actuellement, il n'y a pas de prise en charge des redirections définies dans votre fichier netlify.toml .
En savoir plus sur les redirections Netlify ici.
next-on-netlify crée une fonction Netlify pour chacune de vos pages SSR et points de terminaison API. Actuellement, vous ne pouvez créer des fonctions Netlify personnalisées qu'à l'aide de @ netlify / plugin-nextjs.
Si votre page / itinéraire API suivante se termine par -background , il sera traité comme une fonction de fond Netlify. Remarque: les fonctions d'arrière-plan ne sont disponibles que sur certains plans.
Vous pouvez utiliser Netlify Identity avec next-on-netlify . Pour toutes les pages avec rendu côté serveur (getInitialProps *, getServersIDEPROPS et API Routes), vous pouvez accéder à l'objet ClientContext via le paramètre req .
Par exemple:
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 ;Pour accéder à Netlify Identity à partir de pages sans rendu côté serveur, vous pouvez créer une route API suivante qui effectue une logique liée à l'identité:
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 } ) ;
}* Notez que les pages utilisant GetInitialProps ne sont que le côté serveur rendues sur le chargement des pages initiales et non lorsque l'utilisateur navigue côté client entre les pages.
getStaticPaths Les pages de secours se comportent différemment avec next-on-netlify qu'avec suivant.js. Sur next.js, lors de la navigation vers un chemin qui n'est pas défini dans getStaticPaths , il affiche d'abord la page de secours. Next.js génère ensuite le HTML en arrière-plan et le met en cache pour les demandes futures.
Avec next-on-netlify , lors de la navigation vers un chemin qui n'est pas défini dans getStaticPaths , le côté serveur rend la page et l'envoie directement à l'utilisateur. L'utilisateur ne voit jamais la page de secours. La page n'est pas mise en cache pour les futures demandes.
Pour en savoir plus, voir: Numéro # 7
Notre solution existante pour Next / Image n'est pas très performante. Nous avons des améliorations des performances sur notre feuille de route, en fonction du travail interne.
Pour obtenir de meilleures performances maintenant, nous vous recommandons d'utiliser un fournisseur de cloud comme Cloudinary (voir les documents suivants).
Ce paquet est maintenu par Lindsay Levine, Finn Woelm et Cassidy Williams.
Shoutout à @ Mottox2 (un pionnier de l'hébergement Next.js sur netlify) et @danielcondemarin (auteur de Serverless-next.js pour AWS). Les deux étaient de grandes inspirations pour ce package.
? Grand "merci" aux personnes suivantes pour leurs contributions, leur soutien et leurs tests bêta:
Les sites suivants sont construits avec next-on-netlify :
opinionatedreact.com (via Twitter)
MissionBit.org (# 18)
gemini.com
bigbinary.com
Créez votre propre blog et déployez sur Netlify!
Construisez-vous quelque chose de génial avec next-on-netlify ? Faites-le nous savoir et nous le présenterons ici :)
