nextjs-tutorial

1. Création de projet

Commandes:

• npx create-next-app@latest: créer le projet
• npm run dev: démarer l'appli

2. Project structure

Lorqu'on lance npm run dev, l'exécution commence par package.json, puis layout.tsx et renvoie RootLayout component. Le server localhost:3000 cheche le component qui se trouve dans le fichier page.tsx

• package.json : contient les dépences du projet et le scrypt
• next.config.ts: fichier de configuration
• tsConfig.json: fichier de configuration de typeScript
• eslint.config.mjs: pour eslint
• tailwind.config.ts: configuration de tailwind
• next-env.d.ts: fichier de déclaration de typeScript
• globals.css: fichier de style de l'application
• layout.tsx: partage des éléments de l'interface utilisateur à travers les pages
• page.tsx: crée ce qui s'affiche sur l'UI

3. Les concepts fondamentaux de nextjs

React Server Components (RSC)

React server components est une nouvelle architecture qui a été introduite par l'équipe et rapidement adoptée par Next.js Elle introduit une nouvelle approche pour céer les composantes React en les divisant en deux types distincts:

• Composantes server (server Componentes): par défaut, nextjs traite toutes les composantes comme les composantes server. Il peut faire des taches liées à la base de données
• Composantes client (Client Components): pour créer un client component, on doit ajouter use client dans le fichier.

Routing

Next.js a un file-system basé sur routing sytem. Ce qui veut dire que les URLS peuvent accéder au navigateur par comment tu organise tes fichiers dans le code.

Routing conventions

• Toutes les routes doivent être dans le fichier app
• tous les fichiers doivent s'appeler page.tsx
• chaque fichier représente un segement du path de l'URL
• le fichier layout.tsx est obligatoire

Exemples

• créer la HomePage
• Créer ABoutPage
  • Créer un dossier about
  • ajouter un fichier page.tsx
• Crer profile page
  • Créer un dossier profile
  • Créer un fichier page.tsx

Si la route n'existe pas, next js renvoie la page 4040 par défaut.

Routes imbriquées

Comment nextjs crée une route qui matche avec le nom du dossier de page.tsx. Pour exemple, on va créer deux routes

• Blog page: on y ajout deux dossiers firts et second
  • first Blog Page
  • Second Blog Page

Routes dynamiques

On va créer des routes dynamiques qui affichents les détails des produits dans des pages dédiées

• product 1
• product 2
• product 3

Pour cela, on crée un dossier [productId] dans le dossier products

Routes dynamiques imbriquées

On peut avoir des routes dynamiques imbriquées

• products/1
• products/1/reviews/1

Catch-all segments pour les routes dynamiques imbriquées

Exemple

Not found route

On peut custominer une route de notNound pour chaque page.

"use cleint" permet d'accéder aux données côté server, les pathparams par exemples.

colocation des fichiers: Private folders

Pour créer un dossier privé, on ajoute _

Route grouge

Un groupe de route comme les routes d'authentification. Pour cela on crée le dossier (auth) qui contient les routes

• loging
• logout
• register
• forgot-password

Layout

Une layout est une UI qui est partagée entre mutliple pages dans l'application. Il existe toujour une layout par defaut dans l'application.

Layout imbriquée

C'est faire des layouts spécifiques pour des UI spécifiques. Exemple: Avoir une layout pour les détails des produits.

Multiple layouts racines

On peut faire des layouts pour chaque groupe de pages, il suffit de définir une layout dans le dossiers de la route (marketing) groupe par exemple.

Routing metadata

Une API metadata en Next.js est un moyen qui nous permet de définir des metadatas pour chaque page. Il y a deux moyens d'accéder aux metadatas dans les layouts ou page.tsx.

• export une metadata static
• export dynamic generateMedata function

Les layouts metadatas peux êtres partagées dans toutes les pages alors que les page metadatas appartiennes uniquement à la page concernée.

Navigation

Naviguer entre les routes. On utilise Link component

Active Link

usePathname permet de recupérer un lien actif

params et searchParams

params est une promise qui contient les paramètres d'une route dynamique et searchParams permet de filtrer et trier.

Navigating programmatically

Faire des programmes pour naviguer dans les routes.

Modeles ou templates

Les templates ressemblent aux layouts car elles sont aussi des UI partagées entre multiples pages dans l'app. On crée à travers template.tsx

Chargement de l'interace utilisateur: loading.tsx

Ce fichier nous aide à créer un etat de chargement (loading state) que l'utilisateur voit lorsque le contenu de l'UI se charge. Il apparait instantanément lorsque l'utilisateur navigue et le laisse attendre pendant le moment de chargement.

Gestion des erreurs: error.tsx

Le fichier error.tsx permet de gérer les erreurs. c'est une client component. Il permet à l'application de continuer de marcher même s'il y a une erreur

Gestion des erreurs dans les routes imbriquées

Gerer les erreurs dans les routes imbriquées De façon générale, la gestion des erreurs dépend de la position du fichier error.tsx dans le projet selon que la position est liée au layout, routes, routes imbriquées,à la racine pour les erreurs gloables, etc. Le global-error.tsx ne fontionne que dans le mode prod

Les routes parallèles

On définit les routes parallèles en utilisant le feature "slots" qui permet d'organier le contenu sous forme de module

Les routes conditionnelles

Pour gérer l'affichage avec des conditions

Interception des routes

(.)f2 (..)f3 (..)(..)f4