Deployer Next.js sur Vercel

Deployer Next.js sur Vercel : Un Tutoriel Avancé

Pourquoi Deployer Next.js sur Vercel ?

Deployer un projet Next.js sur Vercel est essentiel pour plusieurs raisons :

1. Vitesse et Performance : Vercel utilise une infrastructure mondiale optimisée pour accélérer le temps de chargement des sites web, ce qui améliore l'expérience utilisateur.
2. Scalabilité Automatique : Vercel gère automatiquement la mise à l'échelle du nombre d'instances nécessaires pour votre application en fonction de la charge.
3. Intégrations et Services : L'intégration facile avec d'autres services comme GitHub, GitLab, et Bitbucket simplifie le processus de développement et de déploiement.
4. Sécurité et Protection des Données : Vercel offre des mesures de sécurité robustes pour protéger vos applications et les données utilisateurs.

Un cas d'usage concret est l'utilisation de Next.js pour créer une application web de gestion de projet. Vous pouvez déploier cette application sur Vercel pour que tous les membres du team puissent y accéder en temps réel, ce qui améliore la productivité et le suivi des tâches.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Node.js : Version 12.0.0 ou supérieure
• npm : Version 6.0.0 ou supérieure (vienant avec Node.js)
• Git : Version recommandée est la dernière version stable

Installez ces outils en suivant les instructions officielles :

## Installer Node.js et npm
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

## Installer Git
sudo apt-get update
sudo apt-get install git

Concepts fondamentaux

1. Conception des Pages en React avec Next.js

Next.js est un framework basé sur React, ce qui signifie que vous pouvez utiliser tous les concepts de React pour créer vos pages.

Schema Mental :

// Page index.js dans le dossier pages/
import { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Bienvenue sur Next.js</h1>
      <p>Vous avez cliqué {count} fois.</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi
      </button>
    </div>
  );
}

2. Routes dynamiques

Next.js permet de créer des routes dynamiques en utilisant des fichiers avec des noms spécifiques.

Schema Mental :

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post #{id}</h1>
      {/* Contenu du post */}
    </div>
  );
}

3. Prerendering Static

Next.js permet de pré-rendering statique pour les pages qui ne changent pas souvent.

Schema Mental :

// pages/about.js
export default function About() {
  return <h1>À Propos</h1>;
}

export async function getStaticProps() {
  // Fetch data from API endpoint
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Regénére les pages toutes les 10 secondes
  };
}

4. API Routes

Next.js vous permet de créer des routes pour votre API en utilisant un dossier api.

Schema Mental :

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Logique de traitement POST
    res.status(200).json({ name: 'John Doe' });
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Mise en pratique : Projet Fil Rouge

Nous allons créer un gestionnaire de tâches simple avec Next.js et déployer-le sur Vercel.

Étape 1 : Création du projet

## Créer un nouveau projet Next.js
npx create-next-app@latest task-manager
cd task-manager

Étape 2 : Configuration des routes dynamiques

Créez une page pour afficher les tâches :

// pages/tasks/[id].js
import { useRouter } from 'next/router';

export default function TaskPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Tâche #{id}</h1>
      {/* Contenu de la tâche */}
    </div>
  );
}

Étape 3 : Prerendering Static

Créez une page pour afficher une liste de tâches statiques :

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      {/* Liste des tâches */}
    </div>
  );
}

export async function getStaticProps() {
  // Simuler les données de tâches
  const tasks = [
    { id: '1', title: 'Réunion hebdomadaire' },
    { id: '2', title: 'Terminer le projet' },
  ];

  return {
    props: {
      tasks,
    },
  };
}

Étape 4 : Création d'une API Route

Créez une route pour ajouter de nouvelles tâches :

// pages/api/tasks.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { title } = req.body;
    // Logique de traitement POST
    res.status(201).json({ id: Date.now(), title });
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Étape 5 : Déploiement sur Vercel

1. Initialiser le dépôt Git :

git init
git add .
git commit -m "Initial commit"
git branch main
git push -u origin main

2. Créer un nouveau projet sur Vercel :

   • Allez sur vercel.com
   • Connectez-vous avec votre compte GitHub, GitLab ou Bitbucket
   • Sélectionnez le dépôt task-manager et démarrez le processus de déploiement

3. Configurer les variables d'environnement (si nécessaire) :

   • Allez dans les paramètres du projet sur Vercel
   • Trouvez l'onglet "Environment Variables" et ajoutez celles nécessaires à votre application

Erreurs Frequentes et Debugging

1. Error: listen EADDRINUSE

L'erreur listen EADDRINUSE signifie que le port est déjà utilisé.

Code Incorrect :

// server.js
const express = require('express');
const app = express();

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

Code Correct :

// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2. Error: Cannot find module 'next'

L'erreur Cannot find module 'next' signifie que Next.js n'est pas installé correctement.

Code Incorrect :

## Installer les dépendances
npm install

Code Correct :

## Vérifier la version de Node.js
node -v

## Installer les dépendances
npm install

3. Error: Unexpected token < in JSON at position 0

L'erreur Unexpected token < in JSON at position 0 signifie que le fichier JSON est corrompu.

Code Incorrect :

{
  "name": "task-manager",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Code Correct :

{
  "name": "task-manager",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Pouraller plus loin

1. Utiliser Next.js App Router (v13+)

Next.js 13 introduit un nouveau modèle de routeur appelé App Router, qui offre une meilleure organisation et des fonctionnalités avancées.

Lien vers la documentation

2. Sécurité avec Middleware

Next.js permet de créer du middleware pour protéger votre application.

Lien vers la documentation

3. Optimisation des Images

Utilisez next/image pour optimiser les images dans vos applications Next.js.

Lien vers la documentation

Défi Pratique

Développez une application de blog simple avec Next.js et déployez-la sur Vercel. L'application doit permettre aux utilisateurs de créer, lire, mettre à jour et supprimer des articles.

Instructions :

1. Créez un projet Next.js.
2. Implémentez les routes pages/posts/[id].js pour afficher un article.
3. Implémentez une API route pour ajouter de nouveaux articles (/api/posts.js).
4. Ajoutez une page d'accueil pour lister tous les articles (index.js).

Indice : Utilisez getStaticProps pour pré-rendering statique des articles.