Wie man moderne SaaS-Anwendungen mit Next.js erstellt

Next.js ist ein leistungsstarkes React-Framework, das den Aufbau moderner Webanwendungen einfacher und effizienter macht. In diesem Artikel werden wir dich durch eine vollständige Schritt-für-Schritt-Anleitung führen, wie du mit Next.js eine einfache SaaS-Anwendung erstellen kannst. Wir werden den gesamten Prozess von der Einrichtung der Entwicklungsumgebung bis zur Erstellung grundlegender Funktionen abdecken.

1. Vorbereitung der Umgebung

Bevor wir beginnen, müssen wir sicherstellen, dass deine Entwicklungsumgebung bereit ist. Bitte folge den folgenden Schritten:

1.1 Installation von Node.js und npm

Stelle sicher, dass Node.js und npm auf deinem Computer installiert sind. Du kannst die folgenden Befehle im Terminal ausführen, um die Versionen zu überprüfen:

node -v
npm -v

Wenn du sie noch nicht installiert hast, kannst du sie von der Node.js-Website herunterladen und installieren.

1.2 Erstellen eines Next.js-Projekts

Führe den folgenden Befehl im Terminal aus, um ein neues Next.js-Projekt zu erstellen:

npx create-next-app@latest my-saas-app
cd my-saas-app

Dies erstellt ein neues Projekt mit dem Namen my-saas-app und installiert automatisch die erforderlichen Abhängigkeiten.

2. Projektstruktur

Im Verzeichnis my-saas-app wirst du die folgende grundlegende Struktur sehen:

my-saas-app/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── ...
├── public/
├── styles/
└── ...

• pages/: Enthält die Seiten der Anwendung.
• public/: Enthält öffentliche Ressourcen wie Bilder, Icons usw.
• styles/: Enthält CSS-Dateien.

3. Kernfunktionen erstellen

In diesem Abschnitt werden wir ein einfaches Benutzerregistrierungs- und Anmeldesystem implementieren.

3.1 Datenbank einrichten

In diesem Beispiel verwenden wir Supabase als Backend-Service. Bitte folge den folgenden Schritten:

1. Gehe zur Supabase-Website und erstelle ein Konto.
2. Erstelle ein neues Projekt und notiere dir deine Datenbank-URL und API-Schlüssel.
3. Verbinde dich mit der Datenbank und erstelle die folgende Benutzertabelle:

create table users (
  id serial primary key,
  email text unique not null,
  password text not null
);

3.2 Supabase-Client installieren

Installiere die Supabase-Clientbibliothek im Next.js-Projekt:

npm install @supabase/supabase-js

3.3 Registrierungsseite erstellen

Erstelle im Verzeichnis pages/ eine neue Datei register.js und füge den folgenden Inhalt hinzu:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Register = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    const { user, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('Registrierung erfolgreich!');
    }
  };

  return (
    
      

# Registrierung

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      Registrieren
    
  );
};

export default Register;

3.4 Anmeldeseite erstellen

Erstelle ebenfalls im Verzeichnis pages/ eine neue Datei login.js und füge den folgenden Inhalt hinzu:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signIn({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('Anmeldung erfolgreich!');
    }
  };

  return (
    
      

# Anmeldung

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      Anmelden
    
  );
};

export default Login;

4. Anwendung bereitstellen

4.1 Auswahl der Bereitstellungsplattform

Wir verwenden Vercel, um unsere Next.js-Anwendung bereitzustellen. Bitte folge den folgenden Schritten:

1. Gehe zur Vercel-Website und registriere ein Konto.
2. Erstelle ein neues Projekt und wähle dein GitHub-Repository aus.
3. Stelle sicher, dass du die Supabase-URL und den API-Schlüssel in den Umgebungsvariablen hinzufügst.
4. Klicke auf Bereitstellen und warte, bis Vercel die Bereitstellung abgeschlossen hat.

4.2 Bereitstellung überprüfen

Nach der Bereitstellung erhältst du eine öffentliche URL. Besuche diese URL, um sicherzustellen, dass die Anwendung ordnungsgemäß funktioniert.

5. Fazit

Durch die Schritte in diesem Artikel hast du erfolgreich eine einfache SaaS-Anwendung mit Next.js erstellt, einschließlich Benutzerregistrierungs- und Anmeldefunktionen. Die Stärke von Next.js liegt in seiner Flexibilität und Effizienz, die es leicht macht, um komplexere Anforderungen zu erweitern. Ich hoffe, du kannst auf dieser Grundlage weiter vertiefen und weitere beeindruckende Anwendungen erstellen!