Si vous avez créé une application Web à l'aide de Next.js mais que vous devez maintenant la convertir en une pure application React.js, vous n'êtes pas seul. Qu'il s'agisse de simplicité, d'exigences spécifiques du projet ou d'une préférence pour le rendu côté client, la conversion de Next.js vers React peut être simple avec les bons conseils. Dans cet article, je vais vous guider à travers les étapes pour convertir une application Next.js en React.js, garantissant une transition en douceur tout en conservant les fonctionnalités de base de votre application.

Remarque : Si vous souhaitez plutôt convertir une application React.js en Next.js, consultez mon autre article sur la façon de convertir React.js en Next.js.

Pourquoi convertir Next.js en React.js ?

Next.js est un framework fantastique qui offre un rendu côté serveur (SSR), une génération de sites statiques (SSG) et une foule d'autres fonctionnalités prêtes à l'emploi. Cependant, ces fonctionnalités peuvent être excessives pour les petits projets ou inutiles si vous préférez le rendu côté client (CSR) avec React.js. La conversion vers React.js peut simplifier votre processus de création, réduire les dépendances du serveur et vous donner plus de contrôle sur l'architecture de votre application.

Comprendre les différences

Avant de plonger dans le processus de conversion, il est essentiel de comprendre les principales différences entre Next.js et React.js :

• Rendu côté serveur vs rendu côté client : Next.js prend en charge SSR et SSG, tandis que React.js est principalement destiné à la RSE.
• Routage : Next.js dispose d'un système de routage intégré basé sur des fichiers. Dans React.js, vous devrez utiliser une bibliothèque comme React Router.
• Routes API : Next.js vous permet de créer des routes API au sein du même projet. Dans React.js, vous séparez généralement le frontend et le backend.

Étapes pour convertir Next.js en React.js

Commençons par le guide étape par étape sur la façon de convertir une application Next.js en React.js.

1. Configurer une nouvelle application React.js

Tout d'abord, créez un nouveau projet React.js à l'aide d'un outil tel que Create React App (CRA) ou Vite.

Utilisation de l'application Create React :

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

Utilisation de Vite :

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

2. Transférer les dépendances

Copiez les dépendances et devDependencies du package.json de votre projet Next.js vers le package.json du nouveau projet React.js. Exécutez npm install ou Yarn Install pour les installer.

3. Migrer les composants et les pages

Copiez le contenu de vos répertoires de composants et de pages Next.js dans le répertoire src de votre projet React.js. Étant donné que Next.js utilise un répertoire de pages pour le routage, vous devrez ajuster cette structure.

4. Implémenter le routage avec React Router

Next.js gère automatiquement le routage en fonction du répertoire des pages. Dans React.js, vous devrez configurer le routage manuellement.

Installer React Router :

npm install react-router-dom

Configurer des itinéraires dans src/App.js :

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. Ajuster les méthodes de récupération de données

Dans Next.js, la récupération des données s'effectue à l'aide de getServerSideProps, getStaticProps ou getInitialProps. Dans React.js, vous devrez gérer la récupération de données dans vos composants, généralement à l'aide de useEffect et useState.

Exemple:

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. Gérer les routes API

Si votre application Next.js utilise des routes API dans le répertoire pages/api, vous devrez les migrer vers un service backend distinct ou ajuster votre interface pour récupérer des API externes.

Options :

• Créez un backend séparé : utilisez Node.js, Express ou tout autre framework backend pour configurer les points de terminaison de l'API.
• Utilisez des API externes : si possible, ajustez votre interface pour consommer directement des API externes.

7. Mettre à jour les variables d'environnement

Next.js utilise des variables d'environnement préfixées par NEXT_PUBLIC_ pour les variables côté client. Dans React.js, créez un fichier .env à la racine de votre projet et préfixez les variables avec REACT_APP_.

Exemple:

REACT_APP_API_URL=https://api.example.com

Accédez-y dans votre code à l'aide de process.env.REACT_APP_API_URL.

8. Supprimer les configurations spécifiques à Next.js

Supprimez toutes les configurations spécifiques à Next.js comme next.config.js. Supprimez également toutes les importations ou packages spécifiques à Next.js qui ne sont plus nécessaires.

9. Testez votre application

Exécutez votre application React.js pour vous assurer que tout fonctionne comme prévu.

npm start

Parcourez chaque itinéraire et fonctionnalité pour vérifier que la conversion a réussi.

Conclusion

La conversion d'une application Next.js en React.js implique la configuration d'un nouveau projet React et la migration de vos composants, l'ajustement du routage et la gestion différente de la récupération des données. Bien que Next.js offre de nombreuses fonctionnalités puissantes, une application React.js pure offre simplicité et flexibilité, en particulier pour les projets qui ne nécessitent pas de rendu côté serveur.

En suivant ce guide sur la façon de convertir Next.js en React.js, vous devriez avoir une transition transparente.

Merci d'avoir lu ! Si vous souhaitez faire l'inverse, consultez mon article sur la façon de convertir une application React.js en Next.js. Pour plus de mises à jour sur de nouveaux projets ou articles, suivez-moi sur Twitter : @jake_prins.