Tutoriel pour configurer et déployer un projet Next.js

Dimitri Dumont

Développeur front-end

Next.js est un framework React qui permet de créer des sites internet et des applications web. Il est très utilisé dans le monde du développement web, que ce soit pour des projets personnels ou professionnels. De nombreuses start-ups l'utilisent pour créer une application ou un SaaS. Malheureusement, trop de projets sont lancés sur de mauvaises bases, ce qui engendre des régressions à chaque mise à jour et des coûts de développement de plus en plus élevés au fil du temps.

Dans cet article, nous allons découvrir comment configurer un projet Next.js pour démarrer sur de bonnes bases. Nous allons utiliser différentes librairies comme ESLint, Prettier, Jest, TailwindCSS, husky et lint-staged.

En plus de la configuration des librairies, nous allons voir comment versionner notre projet avec GitHub. Enfin, nous allons mettre en place une CI grâce aux GitHub Actions et déployer notre projet sur Vercel.

Pour commencer, nous allons créer notre projet Next.js avec la dernière version disponible. Pour cela, ouvrez un terminal et exécutez la commande suivante :

npx create-next-app@latest

Durant la création du projet, vous allez devoir renseigner plusieurs informations comme le nom du projet, l'utilisation ou non de Typescript, etc. Je vous conseille de répondre oui à la plupart des questions, notamment pour la création du dossier src. Lors du développement de votre projet, vous gagnerez du temps de configuration et de recherche en séparant les fichiers de configuration et votre code.

Depuis quelque temps, Next.js est installé et configuré avec Typescript et TailwindCSS. La configuration de Typescript se trouve dans le fichier tsconfig.json. En fonction de vos préférences et de votre projet, vous pouvez modifier cette configuration.

La configuration de TailwindCSS se trouve dans le fichier tailwind.config.js. Vous pouvez être amené à la modifier pour modifier votre thème (par exemple pour changer la couleur principale de votre site, créer des animations, etc.). Vous pouvez également installer des plugins pour ajouter des fonctionnalités à TailwindCSS.

Hexa web

Des conseils pour un projet web ?

Nous contacter

Avoir un code lisible et correctement structuré est important pour la maintenabilité d'un projet. Pour cela, nous allons utiliser ESLint qui est installé par défaut sur un nouveau projet Next.js. Cette librairie permet de détecter des erreurs dans le code et de les corriger automatiquement lorsque c'est possible.

En plus de cette librairie, nous allons utiliser Prettier, un formateur de code. Prettier permet de bien structurer le code et de le rendre plus lisible. Il est possible de configurer Prettier pour qu'il s'adapte à vos préférences.

Pour utiliser ces deux librairies, nous allons installer Prettier et le plugin ESLint pour Prettier. Pour cela, exécutez la commande suivante :

yarn add -D prettier eslint-plugin-prettier

Une fois la librairie installée, créez un fichier .prettierrc à la racine de votre projet. C'est dans ce fichier que vous allez configurer Prettier. Voici un exemple de configuration :

1{
2    "semi": false,
3    "singleQuote": false,
4    "tabWidth": 4,
5    "useTabs": true
6}
7

Pour que Prettier puisse fonctionner avec ESLint, vous devez utiliser le plugin ESLint eslint-plugin-prettier que nous avons installé en même temps que Prettier. Pour cela, ajoutez le plugin dans le fichier .eslintrc.json :

1{
2    "extends": [
3        "next/core-web-vitals",
4        "prettier"
5    ]
6}
7

En plus de la commande yarn lint, vous pouvez créer une nouvelle commande yarn format pour formatter manuellement tous les fichiers Typescript & Javascript dans le dossier src de votre code. Pour cela, il suffit de modifier votre fichier package.json :

1{
2  "scripts": {
3    "dev": "next dev",
4    "build": "next build",
5    "start": "next start",
6    "lint": "next lint",
7    "format": "prettier --write 'src/**/*.{tsx,ts,jsx,js}'"
8  }
9}
10

Pour éviter de devoir à penser à linter et formatter son code régulièrement, il existe Husky et lint-staged qui font ce travail automatiquement avant chaque commit. Pour cela, installez les deux librairies avec la commande suivante :

yarn add -D husky lint-staged

Puis exécutez la commande suivante pour initialiser Husky :

npx husky-init

Ajoutez ensuite cette configuration dans votre fichier package.json :

1{
2    "lint-staged": {
3        "src/**/*.{js,jsx,ts,tsx,json}": [
4            "npx prettier --write",
5            "npx eslint --fix"
6        ]
7    }
8}
9

Désormais, avant chaque commit votre code sera linté et formatté.

Pour tester votre code, vous pouvez utiliser le framework Jest. Pour cela, installez Jest avec la commande suivante :

yarn add -D jest @types/jest ts-jest

Une fois Jest installé, nous allons utiliser la librairie ts-jest pour configurer Jest avec Typescript, notamment pour utiliser les alias. Pour cela, créez un fichier jest.config.ts à la racine de votre projet :

1import { pathsToModuleNameMapper } from "ts-jest"
2import { compilerOptions } from "./tsconfig.json"
3import type { JestConfigWithTsJest } from "ts-jest"
4
5const jestConfig: JestConfigWithTsJest = {
6	roots: ["<rootDir>"],
7	preset: "ts-jest",
8	testEnvironment: "node",
9	modulePaths: ["<rootDir>"],
10	moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
11		prefix: "<rootDir>/",
12	}),
13	transform: {
14		"^.+\\.(ts|tsx)?$": "ts-jest",
15	},
16}
17export default jestConfig
18

Vous pouvez désormais écrire des tests en Typescript dans votre projet avec Jest 🎉

GitHub est une plateforme permettant de versionner son projet en ligne. Elle propose également la possibilité d'intégrer une CI/CD à son projet grâce aux Github Actions.

Pour créer un répertoire, rendez-vous sur le lien suivant et remplissez les différentes informations de votre projet : https://github.com/new

Vous pouvez ensuite créer un fichier .github/workflows/main.yml à la racine de votre projet. Ce fichier va définir une GitHub Action, c'est un script qui pourra s'exécuter à chaque push, pull request et merge sur votre projet. Voici un exemple de GitHub Action :

1name: Main GitHub Actions
2
3on:
4  push:
5    branches: [ main ]
6  pull_request:
7    branches: [ main ]
8
9jobs:
10  test-job:
11    runs-on: ubuntu-latest
12    steps:
13      - name: Checkout
14        uses: actions/checkout@v4
15
16      - name: Use Node 18.17.x
17        uses: actions/setup-node@v3
18        with:
19          node-version: '18.17.x'
20
21      - name: Install dependencies
22        run: yarn install
23
24      - name: Compile TypeScript
25        run: tsc
26
27      - name: Run tests
28        run: jest
29

Cette GitHub Action va s'exécuter à chaque push sur la branche main et sur chaque pull request qui pointe sur la branche main. Elle va simplement installer les dépendances de notre projet et compiler Typescript puis exécuter les tests du projet avec Jest.

Maintenant que nous avons un projet créé, linté et formaté, avec du style, testé et versionné, il ne reste plus qu'à le mettre en ligne ! Pour cela, nous allons utiliser Vercel, une plateforme de déploiement qui permet de déployer différents types de projets, mais surtout des projets Next.js car ce sont les créateurs de ce framework. En choisissant Vercel, vous aller pouvoir profiter de toutes les fonctionnalités de Next.js comme le pré chargement des pages, le pré chargement des images, l'ISR, etc.

Pour déployer un projet sur Vercel, rien de plus simple, il suffit d'aller sur cette page : https://vercel.com/new et de suivre les instructions. Vous pouvez également utiliser l'interface en ligne de commande Vercel pour déployer votre projet.

Une fois connecté, vous pouvez choisir le projet que vous souhaitez déployer. Si vous avez déjà un projet sur GitHub, vous pouvez le sélectionner. Sinon, vous pouvez créer un nouveau projet.

Et voilà ! À chaque push sur votre branche git principale, un déploiement s'effectuera sur Vercel. Par défaut Vercel créé un environnement pour chaque Pull Request que vous créez sur GitHub. Cette fonctionnalité peut être pratique lorsque vous souhaitez tester ou faire tester vos changements à des personnes de votre équipe.

J'espère que cet article vous sera utile pour démarrer votre projet Next.js sur de bonnes bases. Si vous avez une question ou besoin d'un accompagnement pour démarrer votre projet, nous pouvons en discuter : discutons de votre projet.

Si vous souhaitez découvrir comment architecturer votre projet Next.js, je vous invite à lire mon article sur l'architecture hexagonale en front-end : architecture hexagonale en front-end .