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

Guide d'entretien Next.js : 100 questions et réponses pour réussir (gratuit)

Libérez tout votre potentiel en maîtrisant Next.js avec le guide d'entretien Next.js : 100 questions et réponses pour réussir ?. Que vous débutiez en tant que développeur ou que vous soyez un professionnel expérimenté cherchant à faire passer vos compétences au niveau supérieur, cet e-book complet est conçu pour vous aider à réussir les entretiens Next.js et à devenir un collaborateur confiant et prêt à travailler. promoteur. Le guide couvre un large éventail de sujets Next.js, garantissant que vous êtes bien préparé pour toute question qui pourrait vous être posée. Cet e-book explore des concepts clés tels que le rendu côté serveur (SSR) ?, la génération de sites statiques (SSG ) ?, Régénération statique incrémentielle (ISR) ⏳, Routeur d'application ?️, Récupération de données ?, et bien plus encore. Chaque sujet est expliqué en détail, offrant des exemples concrets et des réponses détaillées aux questions d'entretien les plus fréquemment posées. En plus de répondre aux questions, le guide met en avant les bonnes pratiques ✅ pour optimiser vos applications Next.js, améliorer les performances ⚡ et assurer l'évolutivité ?. Avec Next.js en constante évolution, nous approfondissons également les fonctionnalités de pointe telles que React 18, Concurrent Rendering et Suspense ?. Cela garantit que vous êtes toujours au courant des dernières avancées et que vous disposez des connaissances recherchées par les enquêteurs. Ce qui distingue ce guide est son approche pratique. Il ne couvre pas seulement la théorie, mais fournit des informations exploitables que vous pouvez appliquer directement à vos projets. La sécurité ?, l'optimisation du référencement ? et les pratiques de déploiement ?️ sont également explorées en détail pour garantir que vous êtes prêt pour le cycle de vie complet du développement. Que vous vous prépariez pour un entretien technique dans une entreprise de haute technologie ou que vous cherchiez à construire plus efficacement, applications évolutives, ce guide vous aidera à perfectionner vos compétences Next.js et à vous démarquer de la concurrence. À la fin de ce livre, vous serez prêt à aborder n'importe quelle question d'entretien Next.js en toute confiance, des concepts fondamentaux aux défis de niveau expert. Équipez-vous des connaissances nécessaires pour exceller en tant que développeur Next.js ? et saisissez en toute confiance votre prochaine opportunité de carrière !

Spécifier les tailles : spécifiez toujours les attributs de largeur et de hauteur des images afin d'éviter les changements de disposition.

Chargement paresseux des images : Par défaut, les images sont chargées paresseusement, ce qui signifie qu'elles ne sont chargées que lorsqu'elles sont visibles dans la fenêtre. Cela améliore les performances.

Utiliser des fournisseurs d'images externes : Si vous utilisez un CDN d'image externe (comme Cloudinary ou Imgix), configurez Next.js pour le prendre en charge dans next.config.js :

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

Images réactives : utilisez des tailles pour définir différentes tailles d'image pour différentes fenêtres.

69. Comment gérer l'authentification des utilisateurs avec JWT dans Next.js ?

Pour gérer l'authentification des utilisateurs avec JWT (JSON Web Tokens) dans Next.js, vous suivez généralement ces étapes :

1. Store JWT : Après vous être connecté, stockez le JWT dans les cookies ou localStorage.
   • Les cookies sont la méthode privilégiée pour stocker les jetons car ils sont automatiquement envoyés à chaque demande.

2. Définissez JWT dans les en-têtes HTTP : Pour les requêtes API, envoyez le JWT dans l'en-tête d'autorisation.
   

   const response = await fetch('/api/protected', {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
   });
   
   

3. Vérifiez JWT sur le serveur : Dans la route API ou le middleware, vérifiez le JWT avant d'accéder aux ressources protégées.
   

   import jwt from 'jsonwebtoken';
   
   export async function handler(req, res) {
     const token = req.headers.authorization?.split(' ')[1];
     if (!token) return res.status(401).json({ message: 'Unauthorized' });
   
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       req.user = decoded; // Attach the decoded user to the request
       next();
     } catch (err) {
       return res.status(401).json({ message: 'Invalid token' });
     }
   }
   
   

4. Utiliser des cookies pour une connexion persistante : vous pouvez définir des cookies HTTP uniquement avec JWT, afin que l'utilisateur reste authentifié au fil des sessions.

70. Comment pouvez-vous gérer l'autorisation dans Next.js ?

L'autorisation dans Next.js implique généralement de vérifier le rôle ou le niveau d'autorisation de l'utilisateur après une authentification réussie. Voici quelques approches :

1. Autorisation basée sur le rôle : Une fois l'utilisateur connecté, vous stockez son rôle dans le JWT et le vérifiez lorsque l'utilisateur tente d'accéder à une route protégée.
   

   export async function handler(req, res) {
     const token = req.cookies.token;
     if (!token) return res.status(403).json({ message: 'Forbidden' });
   
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     if (decoded.role !== 'admin') {
       return res.status(403).json({ message: 'Forbidden' });
     }
     // Proceed with handling the request
   }
   
   

2. Middleware d'autorisation personnalisé : vous pouvez créer un middleware personnalisé pour vérifier si l'utilisateur dispose des autorisations requises avant de servir certaines pages ou routes API.

3. Redirection des utilisateurs non autorisés : Pour les pages SSR ou SSG, vous pouvez utiliser getServerSideProps pour vérifier si l'utilisateur est autorisé et le rediriger sinon.
   

   export async function getServerSideProps(context) {
     const token = context.req.cookies.token;
     if (!token) {
       return { redirect: { destination: '/login', permanent: false } };
     }
     return { props: {} };
   }
   
   

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!