heroku nextjs

Weiter.js auf Heroku

Bereitstellen von React-basierten universellen Web-Apps auf Heroku.

Demo -Bereitstellung von diesem Repo:
https://nextjs.herokuapp.com

Ein benutzerdefinierter Knoten/Express -Server wird unterstützt. Benutze es zu:

• Kombinieren Sie eine Knoten -API mit einer Nächsten/React -Benutzeroberfläche
• Implementieren Sie benutzerdefinierte URL -Routen

▶ ️ Als nächstes mit benutzerdefiniertem Expressserver

Erfordert

• Heroku
  • Befehlszeilenwerkzeuge (CLI)
  • ein kostenloses Konto
• Git
• Node.js
• Weiter.js

Produktionseinsatz

Sobald Sie eine nächste App vor Ort haben, können Sie sie für den öffentlichen Zugriff bereitstellen.

1. Überarbeiten Sie das npm start -Startskript, um den Web -Listener $PORT festzulegen:

   Zusammenführen Sie diesen Eintrag in package.json :

   {
     "scripts" : {
       "dev" : " next " ,
       "build" : " next build " ,
       "start" : " next start -p $PORT "
     }
   }

   ️ im März 2019 begann Heroku mit dem automatischen Ausführen npm run build , sodass der alte heroku-postbuild Skripteintrag nicht mehr erforderlich ist.

2. Stellen Sie sicher, dass die App ein Git-Repo ist und lokale Verzeichnisse nur ignoriert:

   git init
   (echo node_modules/ && echo .next/) >> .gitignore

3. Erstellen Sie die Heroku -App:

   heroku create $APP_NAME

4. Einsetzen:

   git add .
   git commit -m ' Next.js app on Heroku '
   git push heroku main 

   ️ Ab Juli 2020 unterstützt Heroku git push heroku main und fördert die Verwendung. Die Unterstützung für den Zweignamen "Master" bleibt für die Rückwärtskompatibilität verfügbar.

5. ♻️ Änderungen einsetzen: Hinzufügen, Festlegen und erneut drücken.

Benutzerdefinierte Konfiguration

Als nächstes unterstützt sich die Build- und Laufzeitkonfiguration über die nächste.config.js -Datei.

Verwenden Sie Umgebungsvariablen (Heroku -Konfigurationsvars) in Ihren React -Komponenten, keine Umbauten erforderlich! Setzen Sie einfach als Next.config.js -Werte aus der Serverumgebung mit process.env -Objekt.