Wenn Sie eine Webanwendung mit Next.js erstellt haben, diese nun aber in eine reine React.js-Anwendung konvertieren müssen, sind Sie nicht allein. Ob aus Gründen der Einfachheit, spezifischer Projektanforderungen oder einer Vorliebe für clientseitiges Rendering – die Konvertierung von Next.js zu React kann mit der richtigen Anleitung unkompliziert sein. In diesem Artikel führe ich Sie durch die Schritte zum Konvertieren einer Next.js-App in React.js, um einen reibungslosen Übergang zu gewährleisten und gleichzeitig die Kernfunktionalität Ihrer Anwendung beizubehalten.

Hinweis: Wenn Sie stattdessen eine React.js-Anwendung in Next.js konvertieren möchten, lesen Sie meinen anderen Artikel zum Konvertieren von React.js in Next.js.

Warum Next.js in React.js konvertieren?

Next.js ist ein fantastisches Framework, das serverseitiges Rendering (SSR), statische Site-Generierung (SSG) und eine Vielzahl anderer sofort einsatzbereiter Funktionen bietet. Diese Funktionen könnten jedoch für kleinere Projekte übertrieben oder unnötig sein, wenn Sie clientseitiges Rendering (CSR) mit React.js bevorzugen. Die Konvertierung in React.js kann Ihren Build-Prozess vereinfachen, Serverabhängigkeiten reduzieren und Ihnen mehr Kontrolle über die Architektur Ihrer Anwendung geben.

Die Unterschiede verstehen

Bevor Sie in den Konvertierungsprozess eintauchen, ist es wichtig, die wichtigsten Unterschiede zwischen Next.js und React.js zu verstehen:

• Serverseitiges Rendering vs. clientseitiges Rendering: Next.js unterstützt SSR und SSG, während React.js hauptsächlich für CSR gedacht ist.
• Routing: Next.js verfügt über ein integriertes dateibasiertes Routing-System. In React.js müssen Sie eine Bibliothek wie React Router verwenden.
• API-Routen: Mit Next.js können Sie API-Routen innerhalb desselben Projekts erstellen. In React.js würden Sie normalerweise das Frontend und das Backend trennen.

Schritte zum Konvertieren von Next.js in React.js

Beginnen wir mit der Schritt-für-Schritt-Anleitung zum Konvertieren einer Next.js-Anwendung in React.js.

1. Richten Sie eine neue React.js-Anwendung ein

Erstellen Sie zunächst ein neues React.js-Projekt mit einem Tool wie Create React App (CRA) oder Vite.

Verwenden von Create React App:

npx create-react-app my-react-app
cd my-react-app

Vite verwenden:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Abhängigkeiten übertragen

Kopieren Sie die Abhängigkeiten und devDependencies aus der package.json Ihres Next.js-Projekts in die package.json des neuen React.js-Projekts. Führen Sie „npm install“ oder „garn install“ aus, um sie zu installieren.

3. Komponenten und Seiten migrieren

Kopieren Sie den Inhalt Ihrer Next.js-Komponenten- und Seitenverzeichnisse in das src-Verzeichnis Ihres React.js-Projekts. Da Next.js ein Seitenverzeichnis für das Routing verwendet, müssen Sie diese Struktur anpassen.

4. Implementieren Sie Routing mit React Router

Next.js übernimmt das Routing automatisch basierend auf dem Seitenverzeichnis. In React.js müssen Sie das Routing manuell einrichten.

React Router installieren:

npm install react-router-dom

Routen in src/App.js einrichten:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    } />
        } />
        {/* Add other routes */}
      
  )
}

export default App

5. Passen Sie die Datenabrufmethoden an

In Next.js erfolgt der Datenabruf mit getServerSideProps, getStaticProps oder getInitialProps. In React.js müssen Sie den Datenabruf innerhalb Ihrer Komponenten verwalten, normalerweise mithilfe von useEffect und useState.

Beispiel:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

6. Behandeln Sie API-Routen

Wenn Ihre Next.js-App API-Routen im Verzeichnis „pages/api“ verwendet, müssen Sie diese zu einem separaten Backend-Dienst migrieren oder Ihr Frontend so anpassen, dass es von externen APIs abruft.

Optionen:

• Erstellen Sie ein separates Backend: Verwenden Sie Node.js, Express oder ein beliebiges Backend-Framework, um API-Endpunkte einzurichten.
• Verwenden Sie externe APIs: Passen Sie Ihr Frontend nach Möglichkeit so an, dass es externe APIs direkt nutzt.

7. Umgebungsvariablen aktualisieren

Next.js verwendet Umgebungsvariablen mit dem Präfix NEXT_PUBLIC_ für clientseitige Variablen. Erstellen Sie in React.js eine .env-Datei im Stammverzeichnis Ihres Projekts und stellen Sie den Variablen REACT_APP_ voran.

Beispiel:

REACT_APP_API_URL=https://api.example.com

Greifen Sie in Ihrem Code mit „process.env.REACT_APP_API_URL“ darauf zu.

8. Entfernen Sie Next.js-spezifische Konfigurationen

Löschen Sie alle Next.js-spezifischen Konfigurationen wie next.config.js. Entfernen Sie außerdem alle Next.js-spezifischen Importe oder Pakete, die nicht mehr benötigt werden.

9. Testen Sie Ihre Anwendung

Führen Sie Ihre React.js-Anwendung aus, um sicherzustellen, dass alles wie erwartet funktioniert.

npm start

Gehen Sie jede Route und Funktionalität durch, um zu überprüfen, ob die Konvertierung erfolgreich war.

Abschluss

Um eine Next.js-Anwendung in React.js zu konvertieren, müssen Sie ein neues React-Projekt einrichten und Ihre Komponenten migrieren, das Routing anpassen und den Datenabruf anders handhaben. Während Next.js viele leistungsstarke Funktionen bietet, bietet eine reine React.js-Anwendung Einfachheit und Flexibilität, insbesondere für Projekte, die kein serverseitiges Rendering erfordern.

Wenn Sie dieser Anleitung zum Konvertieren von Next.js in React.js folgen, sollten Sie einen nahtlosen Übergang haben.

Danke fürs Lesen! Wenn Sie daran interessiert sind, den umgekehrten Weg zu gehen, lesen Sie meinen Artikel zum Konvertieren einer React.js-Anwendung in Next.js. Für weitere Updates zu neuen Projekten oder Artikeln folgen Sie mir auf Twitter: @jake_prins.