Utiliser nextJS avec Laravel

Mis en ligne par le 06 juillet 2022.

Introduction

Nous entendons parler de plus en plus de développement avec une API back-end (Laravel, Symfony, ExpressJS), et un front-end séparé (avec NextJS, NuxtJS, Gatsby, ...). A première vue, séparer le back-end et le front-end peuvent faire peur et parraître compliqué. Le simple fait de créer un système de login / register parraît être un véritable calvaire, il faut placer le token dans les entêtes, gérer les accè réservé au membre, .. Laravel a sortie Laravel Breeze il y a quelques temps maintenant, permettant de générer une application de base pour démarrer son projet (Système d'authentication, mot de passe oublié, ..)

L'apparition de breeze-next.

Bien qu'il n'y ai actuellement que très peu de vidéo sur le sujet sur Youtube, Laravel Breeze propose un starter avec nextJS, que vous trouverez sur ce dépot Github : laravel/breeze-next. Ce repository, vous permettra de clôner une application NextJS comportant exactement la même chose que Breeze pour la version Laravel.

Vous aurez donc une application NextJS utilisant le template de Breeze (avec TailwindCSS) comportant les mêmes fonctionnalité (Authentication, mot de passe oublié, ..)

Un middleware pour les utilisateurs.

Breeze-next, vous permet de bloquer l'accès au utilisateur non identifié, mais également au utilisateur identifié pour certaine page. Dans le dossier Hook, vous trouverez un fichier Auth, permettant de faire passer ce middleware sur vos pages.

Voici un exemple de celui-ci :

import { useAuth } from "@/hooks/auth";

const Login = () => {
  const router = useRouter();

  // Cette ligne indique que l'utilisateur ne doit pas être connecté pour accéder à cette page, si il est connecté, on le redirige vers le dashboard.
  const { login } = useAuth({
    middleware: "guest",
    redirectIfAuthenticated: "/dashboard",
  });

  return <GuestLayout>// Mon super rendu côté client</GuestLayout>;
};

Utilisation des layouts

Le AppLayout (le nom du layout donné par breeze-next pour les utilisateurs connecté, restreint automatique les utilisateurs non connecté.)

const { user } = useAuth({ middleware: "auth" });

Dans la logique des choses, vous devrez donc utiliser le layout GuestLayout pour les pages où l'utilisateur n'a pas besoin d'être connecté. Et le layout AppLayout pour les pages nécessitant d'être connecté (un tableau de bord par exemple).

Le mieux à faire, c'est de tester.

Maintenant que vous avez une petite idée de comment fonctionne breeze-next, il ne vous reste plus qu'à l'essayer. Pour cloner le repository, je vous laisse suivre le README.MD présent sur la page Github, celui-ci est très bien détaillé et vous guides dans l'installation et la configuration du projet Next ET Laravel.

Je vous conseille de le tester en faisant un simple projet assez basique (un blog par exemple). Vous verrez ainsi la création de l'API avec Laravel, et l'intégration de celle-ci avec Next.

A propos

Je suis développeur web PHP Fullstack freelance sur le secteur de Bergerac, en Dordogne (24). Passionnée depuis petit par l'informatique, je crée maintenant des sites web depuis environs 5 ans.

Réseaux sociaux