Next.js Interview Mastery: Essential Questions (Part 7)

Next.js Interview Guide: 100 Questions and Answers to Succeed (Free)

Unlock your full potential in mastering Next.js with Next.js Interview Guide: 100 Questions and Answers to Succeed ?. Whether you're just starting out as a developer or you're an experienced professional looking to take your skills to the next level, this comprehensive e-book is designed to help you ace Next.js interviews and become a confident, job-ready developer. The guide covers a wide range of Next.js topics, ensuring you're well-prepared for any question that might come your way.This e-book explores key concepts like Server-Side Rendering (SSR) ?, Static Site Generation (SSG) ?, Incremental Static Regeneration (ISR) ⏳, App Router ?️, Data Fetching ?, and much more. Each topic is explained thoroughly, offering real-world examples and detailed answers to the most commonly asked interview questions. In addition to answering questions, the guide highlights best practices ✅ for optimizing your Next.js applications, improving performance ⚡, and ensuring scalability ?. With Next.js continuously evolving, we also dive deep into cutting-edge features like React 18, Concurrent Rendering, and Suspense ?. This makes sure you're always up-to-date with the latest advancements, equipping you with the knowledge that interviewers are looking for.What sets this guide apart is its practical approach. It doesn’t just cover theory but provides actionable insights that you can apply directly to your projects. Security ?, SEO optimization ?, and deployment practices ?️ are also explored in detail to ensure you're prepared for the full development lifecycle.Whether you're preparing for a technical interview at a top tech company or seeking to build more efficient, scalable applications, this guide will help you sharpen your Next.js skills and stand out from the competition. By the end of this book, you’ll be ready to tackle any Next.js interview question with confidence, from fundamental concepts to expert-level challenges.Equip yourself with the knowledge to excel as a Next.js developer ? and confidently step into your next career opportunity!

Specify sizes: Always specify the width and height attributes for images to avoid layout shifts.

Lazy load images: By default, images are lazy-loaded, meaning they are only loaded when they are visible in the viewport. This improves performance.

Use external image providers: If you are using an external image CDN (like Cloudinary or Imgix), configure Next.js to support it in next.config.js:

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

Responsive images: Use sizes to define different image sizes for different viewports.

69. How can you handle user authentication with JWT in Next.js?

To handle user authentication with JWT (JSON Web Tokens) in Next.js, you typically follow these steps:

1. Store JWT: After logging in, store the JWT in cookies or localStorage.
   • Cookies are the preferred method for storing tokens as they are automatically sent with each request.

2. Set JWT in the HTTP headers: For API requests, send the JWT in the Authorization header.
   

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

3. Verify JWT on the server: In the API route or middleware, verify the JWT before accessing protected resources.
   

   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. Use cookies for persistent login: You can set HTTP-only cookies with JWT, so the user remains authenticated across sessions.

70. How can you handle authorization in Next.js?

Authorization in Next.js typically involves checking the user's role or permission level after successful authentication. Here are some approaches:

1. Role-based authorization: Once the user logs in, you store their role in the JWT and check it when the user tries to access a protected route.
   

   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. Custom authorization middleware: You can create a custom middleware to check if the user has the required permissions before serving certain pages or API routes.

3. Redirect unauthorized users: For SSR or SSG pages, you can use getServerSideProps to check if the user is authorized and redirect them if not.
   

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

The above is the detailed content of Next.js Interview Mastery: Essential Questions (Part 7). For more information, please follow other related articles on the PHP Chinese website!