Next.js Interview Mastery: Essential Questions 61-70 (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!

cyroscript.gumroad.com

61. How does prefetching work in Next.js?

Prefetching in Next.js refers to the practice of fetching linked resources (like JavaScript and data) before a user navigates to a new page, making subsequent page loads faster.

• Automatic Prefetching: Next.js automatically prefetches linked pages in the background when using the next/link component. This means that when a link is in the viewport, the associated page’s assets are preloaded in the background, ready for quick navigation when clicked.

• Disabling Prefetching: You can disable prefetching for a specific link by setting prefetch={false} on next/link.
  

  import Link from 'next/link';
  <Link href="/about" prefetch={false}>
    <a>About</a>
  </Link>
  
  

62. How does Next.js handle redirects?

Next.js provides several ways to handle redirects.

1. Using next.config.js: You can define global redirects that apply to the entire app.
   

   // next.config.js
   module.exports = {
     async redirects() {
       return [
         {
           source: '/old-page',
           destination: '/new-page',
           permanent: true, // or false for temporary redirects
         },
       ];
     },
   };
   
   

2. Using getServerSideProps: For more dynamic redirects based on server-side logic.
   

   export async function getServerSideProps() {
     return {
       redirect: {
         destination: '/new-page',
         permanent: true,
       },
     };
   }
   
   

3. Using next/router for client-side redirects:
   

   import { useRouter } from 'next/router';
   
   const router = useRouter();
   router.push('/new-page');  // Client-side redirect
   
   

63. What is the default behavior of next/link in prefetching?

By default, next/link prefetches linked pages in the background when they become visible in the viewport. This happens automatically to improve navigation speed. The prefetching is done using IntersectionObserver to detect when a link is visible.

• Disable Prefetching: To prevent prefetching for a specific link, set the prefetch prop to false.
  

  <Link href="/about" prefetch={false}>
    <a>About</a>
  </Link>
  
  

64. How can you use React Query with Next.js?

React Query is a powerful library for data fetching, caching, and synchronization in React applications. In Next.js, you can use React Query in the same way as you would in any React app, but it integrates well with SSR and SSG.

1. Install React Query:
   

   npm install react-query
   
   

2. Configure React Query:
   Wrap your application in a QueryClientProvider in _app.js.
   

   import { QueryClient, QueryClientProvider } from 'react-query';
   
   const queryClient = new QueryClient();
   
   function MyApp({ Component, pageProps }) {
     return (
       <QueryClientProvider client={queryClient}>
         <Component {...pageProps} />
       </QueryClientProvider>
     );
   }
   
   

3. Use React Query with SSR or SSG:
   You can use getServerSideProps or getStaticProps to fetch data with React Query and hydrate the data in your component.

   Example:
   

   import { useQuery } from 'react-query';
   
   async function fetchData() {
     const res = await fetch('/api/data');
     return res.json();
   }
   
   function MyPage() {
     const { data, error, isLoading } = useQuery('data', fetchData);
   
     if (isLoading) return <div>Loading...</div>;
     if (error) return <div>Error loading data</div>;
   
     return <div>Data: {data}</div>;
   }
   
   

65. What are custom hooks in Next.js?

Custom hooks in Next.js are JavaScript functions that allow you to encapsulate and reuse logic across components. These are not specific to Next.js but are a standard feature of React.

• Example: A custom hook for fetching data.
  

  import { useState, useEffect } from 'react';
  
  function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      };
      fetchData();
    }, [url]);
  
    return { data, loading };
  }
  
  export default useFetch;
  
  

66. How can you lazy-load components in Next.js?

In Next.js, you can use dynamic imports to lazy-load components. This helps in reducing the initial page load time by loading components only when they are needed.

• Dynamic import with next/dynamic:
  

  import dynamic from 'next/dynamic';
  
  const LazyComponent = dynamic(() => import('./LazyComponent'));
  
  function MyPage() {
    return (
      <div>
        <h1>Welcome</h1>
        <LazyComponent />
      </div>
    );
  }
  
  

• Lazy-load with Suspense (if React 18):
  You can also use React’s Suspense for wrapping components that need to be lazy-loaded.

67. What are the benefits of using SWR in Next.js?

SWR is a React hook library for data fetching that provides several benefits:

• Automatic Caching: SWR caches the data it fetches, reducing the need for repeated network requests.
• Revalidation: SWR automatically revalidates data when components re-render, ensuring fresh data is always displayed.
• Client-side Fetching: SWR makes it easier to fetch data on the client side, especially for dynamic data.

• Optimistic UI: SWR supports optimistic UI updates to improve performance.

  Example usage of SWR in Next.js:
  

  import useSWR from 'swr';
  
  function MyComponent() {
    const { data, error } = useSWR('/api/data', fetch);
  
    if (error) return <div>Error loading data</div>;
    if (!data) return <div>Loading...</
  

68. What are the best practices for using images in Next.js?

Next.js provides the next/image component for image optimization. Here are some best practices for using images in Next.js:

1. Use next/image for automatic optimization: It automatically optimizes images by resizing them, serving them in modern formats (like WebP), and lazy-loading them.
   

   import Image from 'next/image';
   
   <Image
     src="/path-to-image.jpg"
     alt="Image description"
     width={500}
     height={300}
   />
   
   

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

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

4. 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'],
     },
   };
   
   

5. 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: {} };
   }