How to Build a Basic CRUD App with Next.js?

50min
Introduction
Dans ce guide, nous allons parcourir la création d'une application CRUD complète (créer, lire, mettre à jour, supprimer) en utilisant Next.js pour votre frontend, associé à Back4app comme solution backend.
Vous allez configurer un projet nommé Basic-CRUD-App-NextJS, concevoir un schéma de base de données dynamique et intégrer une fonctionnalité CRUD robuste dans votre application Next.js.
Nous couvrirons tout, de la configuration de votre projet Back4app et de la conception des collections à la connexion de votre interface Next.js en utilisant le SDK Parse ou les méthodes REST/GraphQL.
À la fin, vous aurez une application web prête pour la production avec une authentification utilisateur sécurisée et une gestion efficace des données.
Points clés à retenir
Construire une application CRUD complète avec Next.js et Back4app.
Apprendre à concevoir un schéma backend flexible adapté à vos besoins en données.
Utiliser une interface Admin intuitive, par glisser-déposer, pour la gestion des données.
Découvrir les meilleures pratiques pour le déploiement, y compris la conteneurisation Docker et l'intégration GitHub.
﻿
Prérequis
Avant de commencer, assurez-vous d'avoir :
Un compte Back4app avec un nouveau projet configuré.
Pour des conseils, consultez Démarrer avec Back4app.
Un environnement de développement Next.js.
Utilisez Créer une application Next ou un outil similaire. Assurez-vous que Node.js (version 14 ou ultérieure) est installé.
Une compréhension de base de JavaScript, Next.js et des intégrations API.
Visitez la documentation de Next.js pour un aperçu si nécessaire.
﻿
Étape 1 – Configuration de votre projet
Initier un nouveau projet Back4app
Connectez-vous à votre compte Back4app.
Cliquez sur le bouton “Nouvelle application” sur votre tableau de bord.
Entrez le nom du projet : Basic-CRUD-App-NextJS et suivez les instructions.
Créer un nouveau projet
﻿
Votre nouveau projet apparaît dans le tableau de bord, servant de noyau pour votre backend.
Créez votre application Next.js
Ouvrez votre terminal et exécutez :
Bash
npx create-next-app@latest basic-crud-app-nextjs
npx create-next-app@latest basic-crud-app-nextjs
﻿
Changez de répertoire vers votre projet :
Bash
cd basic-crud-app-nextjs
cd basic-crud-app-nextjs
﻿
Cette commande configure un cadre de projet Next.js prêt pour la personnalisation.
﻿
Étape 2 – Élaboration de votre schéma de base de données
Structuration de votre modèle de données
Pour cette application CRUD, vous allez créer des collections essentielles. Ci-dessous se trouvent deux collections principales avec des détails de champ qui permettent les fonctionnalités de base.
1. Collection d'articles
Cette collection stocke des détails sur chaque article.
Champ
Type de données
Description
_id
Identifiant d'objet
Identifiant unique généré automatiquement.
titre
Chaîne
Le nom ou le titre de l'article.
description
Chaîne
Un bref résumé de l'article.
créé à
Date
Horodatage lorsque l'élément est créé.
mis à jour le
Date
Horodatage de la dernière mise à jour.
2. Collection des utilisateurs
Cette collection gère les profils d'utilisateur et les données d'authentification.
Champ
Type de données
Description
_id
Identifiant d'objet
Identifiant unique généré automatiquement.
nom d'utilisateur
Chaîne
Nom d'utilisateur unique pour l'utilisateur.
email
Chaîne
Adresse e-mail unique.
hash_de_mot_de_passe
Chaîne
Mot de passe haché de manière sécurisée pour l'authentification de l'utilisateur.
créé à
Date
Horodatage de la création du compte.
mis à jour le
Date
Horodatage de la dernière mise à jour du compte.
Vous pouvez définir manuellement ces collections dans le tableau de bord Back4app en créant une nouvelle classe pour chaque collection et en ajoutant les colonnes pertinentes.
Créer une nouvelle classe
﻿
Créez des champs en choisissant le type de données approprié, en nommant la colonne et en définissant des valeurs par défaut ou des exigences.
Créer une colonne
﻿
﻿
Utiliser l'assistant AI de Back4app pour la configuration du schéma
L'assistant AI de Back4app simplifie la génération de schémas de base de données. Décrivez vos collections et champs souhaités, et laissez l'assistant générer automatiquement la structure.
Étapes pour utiliser l'assistant AI :
Ouvrez l'assistant AI :
Trouvez-le dans le menu de votre tableau de bord Back4app.
Décrivez votre modèle de données :
Collez un prompt détaillé décrivant vos collections et exigences de champ.
Examinez et appliquez :
Vérifiez le schéma généré et mettez-le en œuvre dans votre projet.
Exemple de prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Cette méthode non seulement fait gagner du temps mais garantit également que votre schéma est cohérent et optimisé.
﻿
Étape 3 – Activation de l'interface d'administration et des fonctionnalités CRUD
Exploration de l'interface d'administration
L'interface d'administration Back4app offre une solution sans code pour gérer vos données backend. Avec son système intuitif de glisser-déposer, vous pouvez facilement effectuer des opérations CRUD.
Activation de l'interface d'administration
Accédez à la section “Plus” dans votre tableau de bord Back4app.
Cliquez sur “Admin App” puis sélectionnez “Activer l'application Admin.”
Configurez vos identifiants d'administrateur en configurant votre premier utilisateur administrateur. Cela établit également des rôles comme B4aAdminUser et les collections système nécessaires.
Activer l'application Admin
﻿
Après activation, connectez-vous à l'interface d'administration pour commencer à gérer vos données.
Tableau de bord de l'application Admin
﻿
Exécution des opérations CRUD via l'interface d'administration
Dans l'interface d'administration, vous pouvez :
Créer des enregistrements : Utilisez le bouton “Ajouter un enregistrement” dans une collection (par exemple, Articles) pour insérer de nouvelles données.
Voir ou mettre à jour des enregistrements : Cliquez sur un enregistrement pour inspecter ou modifier ses champs.
Supprimer des enregistrements : Utilisez l'option de suppression pour retirer les entrées obsolètes.
Cette interface simplifiée rend la gestion des données claire et efficace.
﻿
Étape 4 – Connexion de Next.js à Back4app
Avec votre backend configuré, l'étape suivante consiste à connecter votre application Next.js.
Option A : Utiliser le SDK Parse
Installer le SDK Parse :
Bash
npm install parse
npm install parse
﻿
Initialiser Parse dans votre application Next.js :
Créer un fichier (par exemple, lib/parseConfig.js) :
JS
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Intégrer Parse dans une page Next.js :
Par exemple, créez une page pour récupérer et afficher des éléments.
JS
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
﻿
Option B : Utiliser REST ou GraphQL
Si vous préférez ne pas utiliser le SDK Parse, vous pouvez gérer les opérations CRUD avec REST ou GraphQL. Par exemple, pour récupérer des éléments via REST :
JS
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
﻿
Intégrez ces appels API dans vos composants Next.js selon vos besoins.
﻿
Étape 5 – Sécuriser votre backend
Mise en œuvre des listes de contrôle d'accès (ACL)
Sécurisez vos données en attribuant des ACL aux objets. Par exemple, pour créer un élément auquel seul son propriétaire peut accéder :
JS
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
﻿
Configuration des autorisations au niveau de la classe (CLP)
Dans le tableau de bord Back4app, ajustez les CLP pour chaque collection afin de restreindre l'accès aux données uniquement aux utilisateurs autorisés.
﻿
Étape 6 – Mise en œuvre de l'authentification des utilisateurs
Configuration des comptes utilisateurs
Back4app utilise la classe Utilisateur intégrée de Parse pour l'authentification. Dans votre application Next.js, gérez l'inscription et la connexion comme indiqué ci-dessous :
JS
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
﻿
﻿Une approche similaire peut être utilisée pour la gestion des connexions et des sessions. Vous pouvez également activer des fonctionnalités supplémentaires telles que les connexions sociales, la vérification par e-mail et la récupération de mot de passe via le tableau de bord Back4app.
﻿
Étape 7 – Déploiement de votre frontend Next.js
Les options de déploiement de Back4app vous permettent d'héberger votre application Next.js sans effort, que ce soit par intégration GitHub ou containerisation Docker.
7.1 Construction de votre version de production
Ouvrez votre répertoire de projet dans le terminal.
Exécutez la commande de construction :
Bash
npm run build
npm run build
﻿
Cela génère un .next dossier contenant des fichiers statiques et rendus par le serveur optimisés.
﻿
7.2 Organisation et téléchargement de votre code
Votre dépôt doit contenir tous les fichiers source de votre application Next.js. Une structure typique pourrait être :
Text
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
﻿
Exemple : lib/parseConfig.js
JS
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Exemple : pages/index.js
(Référez-vous au code fourni à l'étape 4)
Engager votre code sur GitHub
Initialiser un dépôt Git :
Bash
git init
git init
﻿
Ajouter tous les fichiers :
Bash
git add .
git add .
﻿
Engagez vos modifications :
Bash
git commit -m "Initial commit of Next.js CRUD application"
git commit -m "Initial commit of Next.js CRUD application"
﻿
Créer un dépôt GitHub :
Par exemple, nommez-le basic-crud-app-nextjs.
Poussez votre code :
Bash
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
﻿
﻿
7.3 Intégration avec le déploiement Web de Back4app
Accéder au déploiement Web :
Connectez-vous à votre tableau de bord Back4app, accédez à votre projet et sélectionnez la fonctionnalité de déploiement Web.
Connectez votre compte GitHub :
Suivez les instructions pour lier votre dépôt.
Sélectionnez votre dépôt et votre branche :
Choisissez le dépôt (par exemple, basic-crud-app-nextjs) et la branche (par exemple, main) contenant votre code.
﻿
7.4 Configuration des paramètres de déploiement
Commande de construction :
Si votre dépôt ne comprend pas de dossier pré-construit .next, spécifiez la commande (par exemple, npm run build).
Répertoire de sortie :
Définissez le répertoire de sortie sur .next afin que Back4app sache où se trouvent vos fichiers compilés.
Variables d'environnement :
Ajoutez toutes les variables d'environnement nécessaires, telles que les clés API.
﻿
7.5 Conteneuriser votre application Next.js avec Docker
Si vous préférez Docker pour le déploiement, incluez un Dockerfile dans votre dépôt :
Dockerfile
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Sélectionnez l'option de déploiement Docker dans Back4app pour conteneuriser et déployer votre application.
﻿
7.6 Lancement de votre application
Déployez votre application :
Cliquez sur le Déployer bouton dans Back4app.
Surveillez le processus de construction :
Back4app récupérera votre code, exécutera la commande de construction et déploiera votre application.
Accédez à votre application en direct :
Une fois le déploiement terminé, une URL sera fournie où votre application Next.js est hébergée.
﻿
7.7 Vérification de votre déploiement
Visitez l'URL fournie :
Ouvrez l'URL dans votre navigateur.
Testez la fonctionnalité :
Assurez-vous que vos pages se chargent correctement et que toutes les opérations CRUD fonctionnent.
Déboguez si nécessaire :
Utilisez les outils de développement du navigateur et les journaux de Back4app pour diagnostiquer tout problème.
﻿
Étape 8 – Conclusion et prochaines étapes
Félicitations ! Vous avez construit avec succès une application CRUD robuste avec Next.js et Back4app. Vous avez configuré votre projet, conçu des collections sur mesure et connecté votre frontend Next.js à un backend sécurisé.
Prochaines étapes :
Améliorez votre frontend :
Développez votre application Next.js avec des fonctionnalités avancées telles que des vues détaillées, une fonctionnalité de recherche ou des mises à jour en temps réel.
Augmentez votre backend :
Explorez les fonctions Cloud, les intégrations tierces ou des contrôles d'accès supplémentaires.
Continuez à apprendre :
Visitez la documentation de Back4app et les ressources Next.js pour une optimisation et une personnalisation supplémentaires.
En suivant ce tutoriel, vous possédez désormais les compétences nécessaires pour créer une application CRUD évolutive et sécurisée en utilisant Next.js et Back4app. Bon codage !
Champ	Type de données	Description
_id	Identifiant d'objet	Identifiant unique généré automatiquement.
titre	Chaîne	Le nom ou le titre de l'article.
description	Chaîne	Un bref résumé de l'article.
créé à	Date	Horodatage lorsque l'élément est créé.
mis à jour le	Date	Horodatage de la dernière mise à jour.
Champ	Type de données	Description
_id	Identifiant d'objet	Identifiant unique généré automatiquement.
nom d'utilisateur	Chaîne	Nom d'utilisateur unique pour l'utilisateur.
email	Chaîne	Adresse e-mail unique.
hash_de_mot_de_passe	Chaîne	Mot de passe haché de manière sécurisée pour l'authentification de l'utilisateur.
créé à	Date	Horodatage de la création du compte.
mis à jour le	Date	Horodatage de la dernière mise à jour du compte.
Comment créer une application CRUD basique avec PHP ?
Comment Créer une Application CRUD de Base avec Angular ?