next on netlify
v3.0.1
Wir verwerten next-on-netlify zugunsten des wesentlichen Next.js-Plugins von Netlify. Bitte besuchen Sie dieses Problem, um mehr über die Abwertung von next-on-netlify zu erfahren und Fragen zu stellen. Sie können auch unser Simple Migration DOC für Unterstützung besuchen, um zum Plugin zu migrieren.
next-on-netlify ist ein Dienstprogramm zum Aktivieren der serverseitigen Rendering in Next.js on Netlify. Es füllt Ihre Anwendung in eine winzige Kompatibilitätsebene, sodass Seiten mit Netlify-Funktionen serverseitig gerendert werden können.
getStaticPaths npm install --save next-on-netlify
Wir müssen unsere Next.js -App als serverlose App erstellen. Weitere Informationen zu Serverless Next.js finden Sie hier.
Es ist super einfach. Erstellen Sie einfach eine next.config.js -Datei im Stamm Ihres Projekts und schreiben Sie Folgendes:
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;Wenn in der Bereitstellung Binärdateien erforderlich sind, ist die folgende Konfiguration erforderlich (Prisma ist ein Beispiel):
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; Das Paket für das Next-on-Netlify fügt den Befehl next-on-netlify hinzu. Wenn wir diesen Befehl ausführen, erstellt einige Magie unsere Next.js -App für das Hosting auf Netlify*vor.
Wir möchten, dass der Befehl des nächsten Netlify ausgeführt wird, nachdem wir unsere nächste Anwendung von.js erstellt haben. Fügen wir also unserer Paket.json -Datei einen Postbauerhaken hinzu. Sie "postbuild": "next-on-netlify" den vorhandenen Skripten wie SO:
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*Wenn Sie neugierig auf die "Magie" sind, schauen Sie sich die gut dokumentierte Datei next-on-netlify.js an.
Wir sind fast fertig! Wir müssen Netlify nur mitteilen, wie wir unsere nächste.js -App erstellen, in der sich der Ordner für Funktionen befindet und welchen Ordner auf seine CDN hochgeladen werden soll. Wir tun dies mit einer netlify.toml -Datei im Stamm Ihres Projekts und den folgenden Anweisungen:
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " Hinweis: out_functions und out_publish sind hart im Next-on-Netlify. Diese sind momentan nicht konfigurierbar.
Wenn Ihr Projekt private Submodules enthält, müssen Sie:
Generieren Sie einen Bereitstellungsschlüssel in Netlify und fügen Sie ihn den entsprechenden Submodulen hinzu, damit sie während des Bereitstellungsvorgangs kloniert werden können.
Stellen Sie sicher, dass die Submodul -Fernbedienungen auf das SSH -Format festgelegt sind (dh [email protected]:owner/project.git , nicht https://... ). In dem Submodul -Verzeichnis kann die Git -Fernbedienung aktualisiert werden mit:
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.gitWir sind fertig. Lassen Sie uns einsetzen
Wenn Sie mit Netlify nicht vertraut sind, befolgen Sie hier die Bereitstellungsanweisungen: https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js---to-netlify/
Ich empfehle Ihnen, weiterhin als next dev Ihre Bewerbung vor Ort zu erstellen und vorzuschauen.
Wenn Sie jedoch die Netlify-Bereitstellung auf Ihrem Computer emulieren möchten, können Sie auch lokal next-on-netlify und dann netlify-cli verwenden, um das Ergebnis voranzutreiben.
Installieren Sie zunächst die neueste Version von netlify-cli (Sie können sich auch Package.json ansehen, um die Version zu sehen, gegen die der nächste Netlify getestet wurde):
npm install -g netlify-cli Fügen Sie dann Ihrem netlify.toml den folgenden [dev] -Block hinzu:
# 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 " Fügen Sie zuletzt die folgenden Zeilen zu Ihrem .gitignore hinzu:
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/Jetzt bist du fertig.
Wenn Sie ab sofort Ihre Bewerbung vor Ort in der Vorschau von vorne anwenden möchten, laufen Sie einfach aus:
npx next-on-netlify watch : Dadurch wird next build ausgeführt, um Ihre nächste.js-App und next-on-netlify zu erstellen, um Ihre nächste.js-App für die Kompatibilität mit Netlify vorzubereiten. Alle Quellcode -Änderungen werden einen weiteren Build ausgelöst.netlify dev : Dadurch wird Netlify auf Ihrem Computer nachgedacht und Sie Ihre App unter http://localhost:8888 vorschau an.Notiz:
Der Vorschau -Modus ist noch nicht lokal nicht verfügbar, wobei netlify dev für statische Seiten ohne Neubeauftragung oder Fallback ausgeführt wird. Dies wird bald unterstützt.
Im Moment wird der Vorschau -Modus in der Produktion für alle nächsten.js -Seitentypen unterstützt.
Sie können benutzerdefinierte Weiterleitungen in einer _redirects und/oder in Ihrer Datei netlify.toml definieren. Der Vorrang dieser Regeln ist:
_redirectsnext-on-netlify Derzeit gibt es keine Unterstützung für Weiterleitungen, die in Ihrer Datei netlify.toml festgelegt sind.
Lesen Sie hier mehr über Netlify -Umleitungen.
next-on-netlify erstellt eine Netlify-Funktion für jede Ihrer SSR-Seiten und API-Endpunkte. Derzeit können Sie nur benutzerdefinierte Netlify-Funktionen mit @netlify/plugin-nextjs erstellen.
Wenn Ihre nächste API -Seite/-route in -background endet, wird sie als Netlify -Hintergrundfunktion behandelt. Hinweis: Hintergrundfunktionen sind nur in bestimmten Plänen verfügbar.
Sie können die Netlify-Identität mit next-on-netlify verwenden. Für alle Seiten mit serverseitigem Rendering (getInitialProps*, GetServerSideProps und API-Routen) können Sie über den Parameter req auf das ClientContext-Objekt zugreifen.
Zum Beispiel:
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 ;Um auf die Netlify-Identität von Seiten ohne serverseitigem Rendering zuzugreifen, können Sie eine nächste API-Route erstellen, die die Identitätslogik ausführt:
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 } ) ;
}* Beachten Sie, dass Seiten mit GetInitialProps nur serverseitig auf dem Laden von Anfangsseiten gerendert sind und nicht, wenn der Benutzer die Client-Seite zwischen den Seiten navigiert.
getStaticPaths Fallback-Seiten verhalten sich anders als mit next-on-netlify als mit Next.js. Beim nächsten.js navigiert es zu einem Pfad, der nicht in getStaticPaths definiert ist, zuerst die Fallback -Seite. Next.js generiert dann die HTML im Hintergrund und zwischengespeichert sie für zukünftige Anfragen.
Wenn Sie mit next-on-netlify zu einem Pfad navigieren, der nicht in getStaticPaths definiert ist, wird die Seite serverseitig die Seite wiederhergestellt und direkt an den Benutzer sendet. Der Benutzer sieht die Fallback -Seite nie. Die Seite wird nicht für zukünftige Anfragen zwischengespeichert.
Weitere Informationen dazu finden Sie unter: Ausgabe Nr. 7
Unsere vorhandene Lösung für Next/Image ist nicht sehr leistungsfähig. Wir haben Leistungsverbesserungen in unserer Roadmap, abhängig von internen Arbeiten.
Um jetzt eine bessere Leistung zu erzielen, empfehlen wir, einen Cloud -Anbieter wie Cloudary (siehe the Next.js Docs) zu verwenden.
Dieses Paket wird von Lindsay Levine, Finn Woelm und Cassidy Williams gepflegt.
Shoutout an @mottox2 (ein Pionier von Hosting Next.js on netlify) und @DanielCondemarin (Autor von Serveress-Next.js für AWS). Die beiden waren große Inspirationen für dieses Paket.
? Großes "Danke" an die folgenden Menschen für ihre Beiträge, Unterstützung und Beta -Tests:
Die folgenden Websites werden mit next-on-netlify gebaut:
minidationatedreact.com (über Twitter)
Missionbit.org (#18)
Gemini.com
BigBinary.com
Erstellen Sie Ihr eigenes Blog und stellen Sie sie für Netlify bereit!
Bauen Sie mit next-on-netlify etwas Fantastisches auf? Lass es uns wissen und wir werden es hier zeigen :)
