Maîtrise des entretiens Next.js : questions essentielles (partie 3)

Dans cet exemple, le composant next/image optimise et ajuste automatiquement l'image pour de meilleures performances et réactivité.

26. Que sont les réécritures dans Next.js et comment fonctionnent-elles ?

Dans Next.js, les réécritures permettent de modifier l'URL de destination des requêtes entrantes sans altérer l'URL affichée dans le navigateur. Cette fonctionnalité est utile pour créer des URL plus propres et plus conviviales, rediriger le trafic vers des API externes ou structurer les URL différemment côté client par rapport au côté serveur.

Comment fonctionnent les réécritures :

• Configuration : Les réécritures sont définies dans le fichier next.config.js au sein de la fonction de réécriture asynchrone, qui renvoie un tableau de règles de réécriture.
• Changement d'URL de destination : lorsque l'utilisateur voit une URL telle que /blog/post, la demande peut être réécrite vers une URL interne ou externe, telle que /api/post.
• Redirection cachée : contrairement aux redirections, les réécritures conservent l'URL d'origine dans le navigateur, offrant ainsi une expérience transparente aux utilisateurs.

Exemple de réécriture :

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

Dans cet exemple, lorsqu'un utilisateur accède à /blog/awesome-post, la requête est en fait gérée par /api/post/awesome-post, tandis que /blog/awesome-post reste visible dans le navigateur.

Cas d'utilisation pour les réécritures :

• Proxies API : réécrivez les URL pour les acheminer vers des API externes sans exposer le point de terminaison réel de l'API.
• Structures d'URL personnalisées : mappez des URL conviviales à des itinéraires sous-jacents complexes, simplifiant ainsi la navigation.
• Routage multilingue : réécrivez les chemins pour diffuser du contenu dans différentes langues sans modifier la structure de l'URL visible.

27. Qu'est-ce que le fichier next.config.js et quel est son rôle ?

Le fichier next.config.js est le fichier de configuration central d'un projet Next.js. Il contrôle divers paramètres de l'application Next.js, notamment les paramètres de construction, les variables d'environnement, le routage et d'autres optimisations. Ce fichier permet aux développeurs de modifier les valeurs par défaut de Next.js, permettant une personnalisation en fonction des exigences du projet.

Rôles clés de next.config.js :

1. Personnalisation des builds :
   • Répertoires de sortie : vous pouvez modifier les chemins de sortie pour les builds et les exportations statiques.
   • Configuration du Webpack : il permet d'étendre ou de remplacer la configuration du Webpack, permettant une gestion de module personnalisée ou des paramètres de chargeur.
2. Variables d'environnement :
   • next.config.js est souvent utilisé pour définir des variables d'environnement pour différents environnements (par exemple, développement ou production). Ceci est utile pour configurer des URL d'API, des clés d'authentification ou d'autres informations sensibles de manière structurée.
3. Internationalisation (i18n) :
   • Le fichier fournit une configuration i18n pour configurer les langues locales, les langues par défaut et les structures d'URL pour les sites Web multilingues.
4. Personnalisation du routage :
   • Réécritures : définissez des réécritures pour modifier la destination des requêtes entrantes, permettant ainsi des structures d'URL personnalisées ou un proxy d'API sans exposer le véritable point de terminaison.
   • Redirections : configurez des redirections d'URL pour rediriger automatiquement les utilisateurs d'un chemin à un autre.
   • En-têtes : configurez des en-têtes personnalisés, tels que les en-têtes liés à la sécurité (par exemple, Content-Security-Policy) pour améliorer la sécurité des applications.
5. Optimisations des performances :
   • Vous pouvez contrôler des optimisations Next.js spécifiques, telles que l'activation du mode strict React, la configuration de l'optimisation des images et le réglage fin des options de compression.
   • Optimisation des pages statiques et dynamiques : next.config.js permet la configuration pour la génération de sites statiques (SSG), le rendu côté serveur (SSR) et la régénération statique incrémentielle (ISR).
6. Caractéristiques expérimentales :
   • Next.js introduit souvent des fonctionnalités expérimentales qui peuvent être activées via next.config.js. Par exemple, vous pouvez activer les fonctionnalités concurrentes ou les configurations expérimentales d'App Router dans les premières versions pour essayer de nouvelles fonctionnalités.

Exemple de next.config.js :

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

Dans cet exemple :

• reactStrictMode améliore la détection des erreurs en activant le mode strict de React.
• Les Variables d'environnement sont définies pour accéder à une API.
• L'internationalisation est configurée avec plusieurs paramètres régionaux.
• Les Réécritures et redirections modifient la façon dont les URL sont acheminées au sein de l'application.
• Les Domaines d'images sont spécifiés pour un chargement optimisé des images à partir de sources externes.

Le fichier next.config.js joue un rôle crucial dans la personnalisation et l'optimisation des applications Next.js, offrant aux développeurs un contrôle étendu sur le comportement, la construction et les paramètres de déploiement des applications.

28. Comment Next.js gère-t-il l'optimisation des images ?

Next.js fournit une optimisation d'image intégrée via l'outil composant, conçu pour améliorer les performances et les temps de chargement en optimisant automatiquement les images en fonction de l’appareil de l’utilisateur et de la taille de l’écran. Cette fonctionnalité permet aux images de se charger rapidement sans sacrifier la qualité, améliorant à la fois l'expérience utilisateur et le référencement.

Comment fonctionne l'optimisation d'image Next.js :

1. Redimensionnement automatique :
   • L' Le composant détecte la taille de l'écran de l'appareil et diffuse des images de taille appropriée. Cela réduit la quantité de données téléchargées, en particulier sur les écrans plus petits.
2. Options réactives et de mise en page :
   • Avec des propriétés telles que fill, responsive et intrinsèque, vous pouvez spécifier comment une image doit se comporter sur différentes tailles d'écran. Le composant gère les images réactives de manière transparente, ce qui facilite la création de mises en page qui s'adaptent à différents appareils.
3. Conversion automatique du format :
   • Next.js sert des images dans des formats modernes, tels que WebP, lorsqu'ils sont pris en charge par le navigateur. Les fichiers WebP sont généralement plus petits et se chargent plus rapidement que les formats JPEG ou PNG traditionnels, réduisant ainsi le temps de chargement des pages.
4. Chargement paresseux :
   • Les images sont chargées par défaut, ce qui signifie qu'elles ne se chargent que lorsqu'elles apparaissent dans la fenêtre d'affichage. Cela réduit le temps de chargement initial des pages, en particulier pour les pages contenant de nombreuses images.
5. Mise en cache :
   • Next.js met en cache les images optimisées pour éviter une réoptimisation à chaque requête, réduisant ainsi la charge du serveur et améliorant la vitesse. Les images mises en cache sont stockées soit localement sur le serveur, soit dans un CDN (Content Delivery Network) si configuré.
6. Prise en charge des images externes :
   • Next.js vous permet de charger des images à partir de domaines externes en configurant l'option domaines dans next.config.js. Ceci est utile pour charger des images à partir d'un CDN ou d'autres sources externes.

Propriétés clés de l'objet Composant :

• src : La source de l'image, qui peut être soit un chemin local, soit une URL externe.
• largeur et hauteur : définissent la taille de l'image et sont requises pour les images statiques pour aider Next.js à optimiser les changements de mise en page.
• mise en page : contrôle le comportement de l'image. Les options incluent :
  • fill : Permet à l'image de se mettre à l'échelle pour remplir son conteneur.
  • réactif : fournit une image réactive qui évolue en fonction de la largeur de la fenêtre d'affichage.
  • intrinsèque : redimensionne aux dimensions intrinsèques de l'image mais répond dans les limites de ces dimensions.
• priorité : permet de prioriser le chargement des images clés, utile pour les images de héros ou le contenu au-dessus de la ligne de flottaison.

Exemple d'utilisation :

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

Configuration de l'optimisation des images dans next.config.js :

Dans next.config.js, vous pouvez personnaliser les paramètres d'optimisation des images. Par exemple :

// next.config.js
module.exports = {
  reactStrictMode: true,
  env: {
    API_URL: process.env.API_URL,
  },
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/posts/:slug',
      },
    ];
  },
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
  images: {
    domains: ['example.com'],
  },
};

Avantages de l'optimisation des images Next.js :

• Temps de chargement des pages réduits : en diffusant des images plus petites et optimisées, les temps de chargement des pages sont considérablement réduits.
• Référencement amélioré et Core Web Vitals : des temps de chargement d'images plus rapides améliorent les métriques Core Web Vitals telles que LCP (Largest Contentful Paint), ce qui a un impact sur le référencement.
• Chargement paresseux automatique : seules les images de la fenêtre d'affichage sont chargées initialement, ce qui accélère le temps de chargement de la page.

L'optimisation d'image Next.js est une fonctionnalité puissante qui gère des tâches complexes en arrière-plan, améliorant ainsi les performances avec un effort minimal du développeur.

29. Qu'est-ce que le rendu hybride de Next.js ?

Le rendu hybride de Next.js fait référence à la possibilité de combiner différentes stratégies de rendu : génération statique (SSG), rendu côté serveur (SSR), et rendu côté client (CSR)—au sein de la même application. Cette flexibilité permet aux développeurs d'utiliser la stratégie de rendu la plus efficace en fonction des exigences spécifiques de chaque page ou composant.

• Génération statique (SSG) : les pages sont pré-rendues au moment de la construction. Idéal pour le contenu qui ne change pas fréquemment, comme les pages marketing.
• Rendu côté serveur (SSR) : les pages sont rendues à chaque requête, garantissant que le contenu est toujours à jour. Utile pour les données spécifiques à l'utilisateur ou le contenu qui change fréquemment.
• Rendu côté client (CSR) : le contenu est récupéré et restitué côté client, souvent pour des fonctionnalités interactives ou des données qui n'ont pas besoin d'être pré-rendues.

Avec App Router, Next.js prend également en charge la Régénération statique incrémentielle (ISR), où les pages générées statiquement peuvent être mises à jour au moment de l'exécution sans reconstruire l'intégralité du site. Cette configuration de rendu hybride offre une approche polyvalente pour équilibrer les performances et la fraîcheur des données.

30. Quels sont les principaux avantages du rendu hybride dans Next.js ?

Les principaux avantages du rendu hybride dans Next.js incluent :

1. Performances optimisées : en utilisant SSG pour un contenu moins dynamique, les pages se chargent plus rapidement et améliorent les mesures de performances, comme Core Web Vitals. SSR est réservé aux pages nécessitant des mises à jour fréquentes des données, garantissant ainsi la fraîcheur sans impacter l'ensemble du site.
2. Flexibilité du référencement : les pages qui bénéficient du référencement peuvent utiliser SSG ou SSR, permettant aux moteurs de recherche d'indexer le HTML entièrement rendu. Avec le rendu hybride, les applications Next.js peuvent optimiser le référencement page par page.
3. Expérience utilisateur améliorée : l'utilisation de CSR pour les composants interactifs dans une page pré-rendue crée des chargements de page plus rapides tout en permettant des interactions dynamiques pour les utilisateurs.
4. Utilisation efficace des ressources : ISR minimise la charge du serveur en régénérant uniquement des pages spécifiques au lieu de l'ensemble du site, ce qui facilite la mise à jour du contenu sans compromettre les performances.
5. Évolutivité : le rendu hybride vous permet de personnaliser le rendu pour différents types de pages, ce qui rend les applications Next.js hautement évolutives.