In diesem Tutorial zeigen wir Ihnen, wie Sie Next.js unter Debian 12 installieren. Next.js ist ein beliebtes React-Framework, mit dem Entwickler problemlos serverseitig gerenderte und statisch generierte Webanwendungen erstellen können. Es bietet eine Reihe von Funktionen und Vorteilen, darunter automatische Codeaufteilung, optimierte Leistung und ein großartiges Entwicklererlebnis.
In diesem Artikel wird davon ausgegangen, dass Sie zumindest über Grundkenntnisse in Linux verfügen, wissen, wie man die Shell verwendet, und, was am wichtigsten ist, dass Sie Ihre Site auf Ihrem eigenen VPS hosten. Die Installation ist recht einfach und setzt voraus, dass Sie im Root-Konto ausgeführt werden. Andernfalls müssen Sie möglicherweise Folgendes hinzufügen:sudo‚ zu den Befehlen, um Root-Rechte zu erhalten. Ich zeige Ihnen die Schritt-für-Schritt-Installation des Next.js React Frameworks auf Debian 12 (Bookworm).
Voraussetzungen
Bevor Sie mit der Installation von Next.js unter Debian 12 fortfahren, stellen Sie sicher, dass Sie die folgenden Anforderungen erfüllen:
- Ein Server, auf dem eines der folgenden Betriebssysteme ausgeführt wird: Debian 12 (Bücherwurm).
- Es wird empfohlen, eine Neuinstallation des Betriebssystems zu verwenden, um mögliche Probleme zu vermeiden.
- SSH-Zugriff auf den Server (oder öffnen Sie einfach Terminal, wenn Sie sich auf einem Desktop befinden).
- Eine aktive Internetverbindung. Sie benötigen eine Internetverbindung, um die erforderlichen Pakete und Abhängigkeiten herunterzuladen.
- Ein Benutzerkonto mit Sudo-Berechtigungen zum Ausführen administrativer Befehle.
Installieren Sie Next.js auf Debian 12 Bookworm
Schritt 1. Bevor Sie mit der Next.js-Installation fortfahren, ist es wichtig, Ihr Debian 12-System zu aktualisieren, um sicherzustellen, dass Sie über die neuesten Sicherheitspatches und Softwareversionen verfügen. Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus:
sudo apt update sudo apt upgrade
Schritt 2. Node.js unter Debian 12 installieren.
Next.js basiert auf Node.js, daher müssen Sie Node.js auf Ihrem Debian 12-Server installieren, bevor Sie Next.js verwenden können.
Fügen Sie zunächst das Node.js-Repository zu Ihrem System hinzu, indem Sie den folgenden Befehl ausführen:
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
Installieren Sie Node.js, indem Sie Folgendes ausführen:
sudo apt install nodejs
Überprüfen Sie die Node.js-Installation, indem Sie die installierte Version überprüfen:
node --version
Schritt 3. Einrichten eines Next.js-Projekts
Nachdem Node.js installiert ist, können Sie ein neues Next.js-Projekt erstellen. Erstellen Sie nun ein neues Verzeichnis für Ihr Projekt und navigieren Sie hinein:
mkdir my-next-app cd my-next-app
Initialisieren Sie ein neues Next.js-Projekt mit create-next-app Befehl:
npx create-next-app@latest
Befolgen Sie die Anweisungen und wählen Sie die Standardoptionen für Ihr Projekt-Setup:
What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/*
Sobald das Projekt erstellt ist, erkunden Sie die generierte Projektstruktur:
- Seiten: Enthält Ihre Next.js-Seiten und API-Routen.
- öffentlich: Speichert statische Assets wie Bilder und Schriftarten.
- Stile: Enthält Ihre CSS-Dateien.
- package.json: Definiert die Abhängigkeiten und Skripte Ihres Projekts.
Starten Sie den Entwicklungsserver, um Ihre Next.js-App in Aktion zu sehen:
npm run dev
Dieser Befehl startet den Entwicklungsserver und Sie können Ihre App anzeigen, indem Sie zu navigieren http://localhost:3000 in Ihrem Webbrowser.
Schritt 4. Next.js konfigurieren.
Next.js stellt eine Konfigurationsdatei namens next.config.js bereit, mit der Sie verschiedene Einstellungen für Ihre Anwendung anpassen können. Ein … kreieren next.config.js Datei im Stammverzeichnis Ihres Projekts, falls sie noch nicht vorhanden ist.
Öffnen Sie die Datei und fügen Sie die gewünschten Konfigurationsoptionen hinzu. Zum Beispiel:
module.exports = {
env: {
API_URL: process.env.API_URL,
},
basePath: '/my-app',
target: 'server',
webpack: (config, { isServer }) => {
// Custom webpack configuration
return config;
},
};
In diesem Beispiel legen wir eine Umgebungsvariable fest, geben einen Basispfad für die Anwendung an, legen das Build-Ziel auf einen Server fest und stellen eine benutzerdefinierte Webpack-Konfiguration bereit.
Schritt 5. Bereitstellung in der Produktion.
Wenn Sie bereit sind, Ihre Next.js-Anwendung in der Produktion bereitzustellen, führen Sie die folgenden Schritte aus:
npm run build
Wählen Sie einen Produktionsprozessmanager zum Ausführen Ihrer Next.js-App. Zwei beliebte Optionen sind PM2 und SystemD.
- Verwendung von PM2:
PM2 global installieren:
sudo npm install -g pm2
Starten Sie Ihre App mit PM2:
pm2 start npm --name "my-next-app" -- start
- Verwenden von SystemD:
Erstellen Sie eine SystemD-Dienstdatei für Ihre Next.js-App:
sudo nano /etc/systemd/system/my-next-app.service
Fügen Sie der Servicedatei die folgende Konfiguration hinzu:
(Unit) Description=My Next.js App After=network.target (Service) Type=simple User=your-user WorkingDirectory=/path/to/my-next-app ExecStart=/usr/bin/npm start Restart=on-failure (Install) WantedBy=multi-user.target
Ersetzen Sie Ihren Benutzer und /path/to/my-next-app mit den entsprechenden Werten für Ihr Setup.
Speichern Sie die Datei und laden Sie die SystemD-Konfiguration neu:
sudo systemctl daemon-reload
Starten und aktivieren Sie den Dienst:
sudo systemctl start my-next-app sudo systemctl enable my-next-app
Glückwunsch! Sie haben Next.js erfolgreich installiert. Vielen Dank, dass Sie dieses Tutorial zur Installation der neuesten Version des Next.js-Reaktionsframeworks unter Debian 12 verwendet haben Bücherwurm. Für weitere Hilfe oder nützliche Informationen empfehlen wir Ihnen, hier nachzuschauen die offizielle Next.js-Website.
