Deployer Next.js sur Heroku

Deployer Next.js sur Heroku : un tutoriel approfondi

Pourquoi Deployer Next.js sur Heroku ?

Contexte réal : pourquoi un dev a besoin de ca au quotidien

La plupart des développeurs modernes travaillent en équipe et utilisent les services cloud pour héberger leurs applications. Heroku est l'un des plus populaires, offrant une expérience simple et rapide pour le déploiement de projets Web. Pour un développeur Next.js, déployer sur Heroku permet d'offrir sa solution à un public global sans se soucier du serveur, de la configuration et de la maintenance.

Un cas d'usage concret en 2-3 phrases

Supposons que vous ayez développé une application de gestion de tâches pour une entreprise. Vous souhaitez partager cette application avec tous les employés, mais sans gérer le serveur qui l'hébergera. En déployant sur Heroku, vous permettez aux employés d'accéder à votre application depuis n'importe quel endroit du monde en quelques clics.

Prerequis

• Connaissance de base de JavaScript et React
• Compréhension des concepts de Next.js (pages, API routes, etc.)
• Un compte Heroku (gratuit possible pour les projets simples)
• Node.js version 14 ou plus récente
• npm (Node Package Manager) version 6.0.0 ou plus récente

Concepts fondamentaux

1. Création d'un projet Next.js

Avant de déployer sur Heroku, nous devons créer un nouveau projet Next.js.

## Créez un nouveau projet Next.js
npx create-next-app@latest my-nextjs-app

## Allez dans le dossier du projet
cd my-nextjs-app

2. Configuration de l'environnement Heroku

Heroku nécessite une configuration spécifique pour fonctionner avec un projet Next.js.

## Créez un fichier Procfile (sans extension)
web: node server.js

Ce fichier indique à Heroku quel script exécuter pour démarrer votre application.

3. Création d'un fichier de configuration Heroku

Heroku utilise un fichier package.json pour gérer les dépendances et les scripts.

{
  "name": "my-nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^12.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Mise en pratique : projet fil rouge

Étape 1 : Création d'une application de gestion de tâches

Nous allons créer une application simple qui permet aux utilisateurs de lister et de marquer des tâches comme faites.

// pages/index.js
import { useState } from 'react';

export default function Home() {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTask = () => {
    if (inputValue.trim()) {
      setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue('');
    }
  };

  const handleToggleTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div>
      <h1>Gestionnaire de tâches</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTask}>Ajouter une tâche</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <span
              style=textDecoration: task.completed ? 'line-through' : 'none'
              onClick={() => handleToggleTask(task.id)}
            >
              {task.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Étape 2 : Déploiement sur Heroku

1. Connectez-vous à votre compte Heroku et installez l'interface de ligne de commande heroku.

## Installez heroku CLI
npm install -g heroku

## Connectez-vous
heroku login

2. Créez une nouvelle application sur Heroku.

## Créez une nouvelle application
heroku create my-nextjs-app

## Déploiez votre application
git init
git add .
git commit -m "Initial commit"
git push heroku master

Étape 3 : Vérification du déploiement

Accédez à l'URL de votre application pour vérifier que tout fonctionne correctement.

## Affichez la URL de l'application
heroku open

Erreurs fréquentes et debugging

1. error Command not found: node

Code incorrect :

node server.js

Corriger :

Assurez-vous que vous avez correctement configuré le fichier Procfile comme mentionné précédemment.

2. Error: listen EACCES: permission denied

Code incorrect :

app.listen(process.env.PORT || 3000, () => {
  console.log('Server is running on port ' + process.env.PORT);
});

Corriger :

Heroku nécessite que le serveur écoute sur un port spécifié par la variable d'environnement PORT.

app.listen(process.env.PORT || 5000, () => {
  console.log('Server is running on port ' + process.env.PORT);
});

3. Error: Cannot find module 'next'

Code incorrect :

npm install next --save-dev

Corriger :

Assurez-vous que Next.js est installé comme une dépendance et non en tant que devDependency.

npm install next --save

Pour aller plus loin

1. Gestion des variables d'environnement : Apprenez à utiliser les variables d'environnement pour stocker des informations sensibles comme les clés API.

   Documentation Heroku sur les variables d'environnement

2. Ajout de services tiers : Intégrez votre application avec des services tiers comme une base de données ou un service d'authentification.

   Documentation Next.js sur l'intégration de services tiers

3. Optimisation des performances : Améliorez la performance de votre application en utilisant des techniques comme le pré-réndu statique.

   Documentation Next.js sur l'optimisation des performances

Défi pratique

Définissez une API de blog simple :

1. Créez une page d'accueil pour afficher les articles.
2. Ajoutez une route API pour ajouter de nouveaux articles.
3. Utilisez Heroku pour déployer votre application.

En suivant ce tutoriel, vous devriez être capable de déployer une application Next.js sur Heroku avec succès.