Deployer Next.js sur Railway

Pourquoi Déployer Next.js sur Railway ?

Deployer un application Next.js sur Railway permet d'accéder à une infrastructure serverless performante et facilement scalable. Cela permet aux développeurs de déployer leurs applications rapidement, sans avoir à gérer la gestion des serveurs en aval, ce qui peut être très gourmand en ressources humaines et technologiques.

Un cas concret est lorsqu'un développeur a un site web personnalisé avec une grande charge d'utilisateurs. En utilisant Railway pour héberger le projet Next.js, l'application peut s'échapper efficacement de la latence des serveurs traditionnels et profiter du temps réseau réduit.

Prerequis

• Comprendre les bases de JavaScript ES6+
• Connaître ReactJS
• Avoir Node.js installé (v14 ou plus récent)
• Un compte Railway avec un plan gratuit suffisant pour le déploiement
• Basic Git (pour la gestion des versions)

Concepts fondamentaux

1. Principe de fonctionnement de Railway

Railway est une plateforme serverless qui permet de déployer n'importe quelle application, peu importe sa taille ou sa complexité. Il utilise Docker pour encapsuler l'environnement d'exécution de votre application et Kubernetes pour la gestion des déploiements.

2. Création d'un nouveau projet sur Railway

Créer un nouveau projet sur Railway est simple : il suffit de cliquer sur le bouton "New Project" et de suivre les instructions pour choisir une branche Git et une image Docker prédéfinie.

3. Configuration du fichier railway.toml

Ce fichier est utilisé par Railway pour configurer l'environnement d'exécution de votre application. Par exemple, vous pouvez spécifier la commande de démarrage de votre application ou les variables d'environnement à utiliser.

## railway.toml

[service]
name = "my-nextjs-app"
dockerfile = "./Dockerfile"

[env]
NEXT_PUBLIC_API_URL = "https://api.example.com"

4. Déploiement de l'application

Une fois que votre projet est configuré, vous pouvez déployer votre application sur Railway en utilisant la commande railway up.

## Terminal

$ railway up

Mise en pratique : Projet fil rouge

Dans ce tutoriel, nous allons créer un simple gestionnaire de tâches avec Next.js. Le projet comprendra une page d'accueil affichant une liste de tâches et une interface pour ajouter de nouvelles tâches.

Étape 1 : Création du projet

Créer un nouveau projet Next.js en utilisant la commande npx create-next-app.

## Terminal

$ npx create-next-app task-manager

Étape 2 : Configuration des fichiers

Naviguez dans le répertoire de votre projet et ouvrez les fichiers suivants pour les configurer.

pages/index.js

// pages/index.js

import { useState } from "react";

export default function Home() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  const handleAddTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { id: Date.now(), text: newTask }]);
      setNewTask("");
    }
  };

  return (
    <div>
      <h1>Gestionnaire de tâches</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <button onClick={handleAddTask}>Ajouter une tâche</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

Étape 3 : Création de la structure des fichiers

La structure des fichiers est simple, avec le fichier principal index.js dans le répertoire pages.

## Terminal

$ tree task-manager/
task-manager/
├── node_modules/
├── public/
│   └── favicon.ico
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── yarn.lock

2 directories, 16 files

Étape 4 : Installation des dépendances

Installez les dépendances nécessaires pour le projet.

## Terminal

$ cd task-manager
$ npm install

Étape 5 : Exécution de l'application

Exécutez votre application localement pour vous assurer qu'elle fonctionne correctement.

## Terminal

$ npm run dev

Étape 6 : Déploiement sur Railway

Enfin, déployez votre application sur Railway en suivant les instructions précédentes.

## Terminal

$ railway up

Erreurs fréquentes et debugging

Erreur 1 : "Cannot find module 'react'"

Code incorrect

// pages/index.js

import { useState } from "react";

Code correct

// pages/index.js

import React, { useState } from "react";

Erreur 2 : "Error: listen EACCES: permission denied"

Code incorrect

## Terminal

$ railway up

Code correct

Vérifiez que vous avez les permissions nécessaires sur le répertoire du projet.

## Terminal

$ chmod -R 755 task-manager

Erreur 3 : "Error: listen EADDRINUSE: address already in use"

Code incorrect

## Terminal

$ railway up

Code correct

Vérifiez que le port utilisé par votre application n'est pas déjà occupé.

## Terminal

$ lsof -i :3000

Pour aller plus loin

1. Utilisation de Next.js API Routes pour créer une API

L'API Routes de Next.js vous permettent d'ajouter des points d'accès à votre application Next.js en utilisant les fichiers .js ou .ts dans le répertoire pages/api.

Exemple :

// pages/api/hello.js

export default function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;
    // Effectuez une action avec les données reçues
    res.status(200).json({ message: 'Données reçues' });
  } else {
    res.status(405).json({ message: 'Méthode non autorisée' });
  }
}

2. Utilisation de Redux pour gérer le state global

La gestion du state global avec Redux peut aider à gérer les états complexes dans vos applications Next.js.

Exemple :

## Terminal

$ npm install @reduxjs/toolkit react-redux

Créez un fichier store.js et configurez votre store Redux :

// store.js

import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasksSlice';

export const store = configureStore({
  reducer: {
    tasks: tasksReducer,
  },
});

3. Utilisation de TypeScript pour le typage statique

TypeScript ajoute un niveau supplémentaire de sécurité et de qualité au code en permettant d'effectuer des vérifications de type au moment de la compilation.

Exemple :

## Terminal

$ npm install typescript @types/react @types/node --save-dev

Créez un fichier tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Créez un fichier pages/index.tsx :

// pages/index.tsx

import { useState } from "react";

export default function Home() {
  const [tasks, setTasks] = useState<{ id: number; text: string }[]>([]);
  const [newTask, setNewTask] = useState<string>("");

  const handleAddTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { id: Date.now(), text: newTask }]);
      setNewTask("");
    }
  };

  return (
    <div>
      <h1>Gestionnaire de tâches</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <button onClick={handleAddTask}>Ajouter une tâche</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

Défi pratique : Créer un mini-CLI tool avec Next.js

Créez un mini-CLI tool qui permet de créer et de gérer des fichiers texte. Utilisez les fonctions fs de Node.js pour écrire dans des fichiers et affichez le contenu du fichier dans la console.

Exemple :

## Terminal

$ npx create-next-app file-manager
$ cd file-manager
$ npm install fs

Créez un fichier index.js :

// pages/index.js

const fs = require('fs');

export default function Home() {
  const [filePath, setFilePath] = useState("");
  const [fileContent, setFileContent] = useState("");

  const handleCreateFile = () => {
    if (filePath) {
      fs.writeFile(filePath, "", (err) => {
        if (err) {
          console.error(err);
        } else {
          console.log("Fichier créé avec succès");
        }
      });
    }
  };

  const handleReadFile = () => {
    if (filePath) {
      fs.readFile(filePath, "utf8", (err, data) => {
        if (err) {
          console.error(err);
        } else {
          setFileContent(data);
        }
      });
    }
  };

  return (
    <div>
      <h1>Gestionnaire de fichiers</h1>
      <input
        type="text"
        value={filePath}
        onChange={(e) => setFilePath(e.target.value)}
        placeholder="Chemin du fichier"
      />
      <button onClick={handleCreateFile}>Créer un fichier</button>
      <button onClick={handleReadFile}>Lire le contenu du fichier</button>
      <pre>{fileContent}</pre>
    </div>
  );
}

Conclusion

Ce tutoriel vous a montré comment déployer un projet Next.js sur Railway. Vous avez appris les concepts fondamentaux de la plateforme, ainsi que des erreurs fréquentes et des techniques pour résoudre ces problèmes.

En suivant ce tutoriel, vous devriez être capable de créer et déployer vos propres applications Next.js sur Railway avec succès. N'oubliez pas d'explorer les ressources supplémentaires pour approfondir votre compréhension de la plateforme et des technologies associées.