Comment Créer Rapidement Une application Web Avec NextJs

Comment Créer Rapidement Une application Web Avec NextJs
Mise à jours :

Flash info: la nouvelle version de ce site web utilise nextjs, une preuve que nextjs peut être déployé en production facilement.

Revenons sur comment créer facilement et rapidement une application web avec nextjs ?

Nextjs est parmi les technologies qui t'offrent la possibilité de créer un site web hyper rapide en termes de performance.

Dans cet article, je te présente rapidement et je te montre comment créer ta première application web avec nextjs.

Avec next js, c'est possible :

  • de créer un blog.
  • de créer un site web vitrine.
  • de créer une plateforme d'e-commerce.
  • ou d'autre application innovante.

Go go go !!

Qu'est-ce que next js ?

C'est tout simplement un framework Reactjs qui t'offre la meilleure expérience de développeur avec toutes les fonctionnalités dont tu as besoin pour la production :

  • rendu hybride statique et serveur.
  • prise en charge de TypeScript.
  • regroupement intelligent.
  • pré-lecture de route.
  • etc.

Aucune configuration nécessaire.

Pourquoi créer des applications web avec nextjs

Pour créer une application Web complète avec React à partir de zéro, tu dois prendre en compte de nombreux détails importants :

Le code doit être regroupé à l'aide d'un bundler comme webpack et transformé à l'aide d'un compilateur comme Babel.

Tu auras besoin d'effectuer des optimisations de production telles que le fractionnement de code.

Tu veux peut-être pré-rendu statiquement certaines pages pour les performances et le référencement.

Tu peux également utiliser le rendu côté serveur ou le rendu côté client.

Tu veux peut-être écrire du code côté serveur pour connecter ton application React à une base de données.

Un framework(cadre ou ensemble d'outils) peut résoudre ces problèmes.

Mais un tel framework doit avoir le bon niveau d'abstraction, sinon il ne sera pas très utile.

Il doit également te garantir une excellente « expérience de développeur », t'assurant, à toi et à ton équipe, une expérience incroyable lors de l'écriture de code.

  • Une architecture du code simple
  • Un code lisible et simple à écrire
  • Une documentation pratique

Next.js : le framework React

Next.js fournit une solution à tous les problèmes ci-dessus.

Mais plus important encore, cela te place, toi et ton équipe, sur la route du succès lors de la création d'applications web React.

Next.js vise à offrir une expérience de développeur de premier ordre et de nombreuses fonctionnalités intégrées, telles que :

  • Un système de routage intuitif basé sur des pages (avec prise en charge des routes dynamiques)
  • Pré-rendu, la génération statique (SSG) et le rendu côté serveur (SSR) sont pris en charge par page
  • Fractionnement automatique du code pour des chargements de page plus rapides
  • Routage côté client avec pré-lecture optimisée
  • Prise en charge CSS et Sass intégrée et prise en charge de toute bibliothèque CSS-in-JS
  • Environnement de développement avec Refresh rapide support
  • Routes d'API pour créer des points de terminaison d'API avec des fonctions sans serveur (serverless).
  • Entièrement extensible

Next.js est utilisé dans des dizaines de milliers de sites Web et d'applications Web destinés à la production, y compris bon nombre des plus grandes marques au monde.

C'est qu'il faut installer pour débuter avec nextjs

Tout d'abord, assurons-nous que ton environnement de développement est prêt.

Si Node.js n'est pas installé, tu peux lire cet article sur comment installer nodejs rapidement ?.

Tu auras besoin de Node.js version 10.13 ou ultérieure.

Encore une fois, si tu n'as pas les bons outils pour écrire du code je t'invite à lire rapidement cet article qui contient quelques outils du développeur web.

Je préfère que tu utilises ton propre éditeur de code et ta propre application de terminal.

Si tu utilises Windows, je te recommande d'avoir un terminal pour Windows et d'utiliser Git Bash qui vient avec Git, qui prend en charge les commandes spécifiques à UNIX de ce didacticiel.

Le sous-système Windows pour Linux (WSL) est une autre option.

Comment créer une application web Next.js

Pour créer une application Next.js :

  • ouvrir son terminal
  • cd <nom_du_repetoire> dans lequel tu veux créer ton application
  • exécute cette commande pour récupérer un projet de démarrage.
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Sous le capot, cela utilise l'outil appelé create-next-app, qui fournit une application Next.js pour toi. Il utilise ce modèle via le drapeau --example.

Comment Exécuter une application Nextjs

Tu as maintenant un nouveau répertoire appelé nextjs-blog, allons voir l'intérieur :

  cd nextjs-blog

Ensuite, exécute la commande suivante :

  npm run dev

Cela démarre le "serveur de développement" de ton application Next.js sur le port 3000.

Pour vérifier si cela fonctionne :

  • Ouvre ton navigateur
  • Écris cette adresse http://localhost:3000 depuis ton navigateur
  • Go !

C'est super ! Tu viens de créer ta première application nextjs

Qu'est-ce qu'un projet Nextjs

Dans ton répertoire, tu vas retrouver des dossiers et fichier qui constituent la structure de base de ton projet web nextjs.

Dans le fichier package.json tu trouveras :

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Ces scripts font référence aux différentes étapes de développement d'une application :

  • dev: Exécute next devqui démarre Next.js en mode développement
  • build: Exécute next build qui construit l'application pour une utilisation en production
  • start: Exécute next start qui démarre un serveur de production Next.js
  • lint: Exécute next lint qui configure la configuration ESLint intégrée de Next.js

Next.js est construit autour du concept de pages, c'est pourquoi il y a un dossier page qui contiendras toutes les pages de ton application web.

Une page est un React composant exporté d'un .js, .jsx, .ts ou .tsx fichier dans les pages répertoire.

Les pages sont associées à un itinéraire en fonction de leur nom de fichier.

Par exemple, tu peux créer :

  • pages/about.js est mappé sur /about.
  • pages/cgu.js est mappé sur /cgu.
  • pages/contact.js est mappé sur /contact.

Tu peux même ajouter des paramètres de routes dynamiques avec le nom de fichier.

  • pages/article/[slug] est mappé sur /article/<mon-article-slug>.
  • pages/athor/[username] est mappé sur /author/<mon-username>.

Conclusion

Nous avons vu rapidement comment créer une application web reactjs basée sur nextjs.

Nous avons vu à quel point, c'est simple, il suffit d'avoir :

  • un bon éditeur de code
  • un terminal Linux, c'est possible d'en avoir même sur Windows
  • et d'installer Node.js.

La construction d'une application nextjs prend moins de temps.

En une seule commande, tu as une application web fonctionnelle.

Tu peux modifier ton application web en respectant la philosophie derrière le framework qui centré sur les pages.