Next.js इंटरव्यू सवाल और जवाब: आपके करियर को नई ऊंचाई पर ले जाने के लिए- next js interview questions and answers

Next.js इंटरव्यू सवाल और जवाब: आपके करियर को नई ऊंचाई पर ले जाने के लिए- next js interview questions and answers

    यदि आप Next.js में महारत हासिल करना चाहते हैं और इंटरव्यू में सफलता पाना चाहते हैं, तो यह पोस्ट आपके लिए है। इसमें हमने Next.js से जुड़े सबसे महत्वपूर्ण और सामान्य सवालों के जवाब दिए हैं। चाहे आप फ्रेशर हों या एक्सपीरियंस्ड डेवलपर, ये सवाल-जवाब आपको इंटरव्यू के लिए पूरी तरह से तैयार करेंगे। Next.js के हर महत्वपूर्ण पहलू को सरल और आसान भाषा में समझाएं गया है, ताकि आप इसे आसानी से समझ सकें और अपने करियर में आगे बढ़ सकें।

    1. What is Next.js? (Next.js क्या है?)

    English:
    Next.js is a React-based framework that enables server-side rendering (SSR) and static site generation (SSG) for building optimized and scalable web applications. It provides features like routing, API handling, and image optimization out of the box.

    हिंदी:
    Next.js एक React आधारित फ्रेमवर्क है जो सर्वर-साइड रेंडरिंग (SSR) और स्टेटिक साइट जनरेशन (SSG) की सुविधा देता है, जिससे तेज़ और स्केलेबल वेब एप्लिकेशन बनाए जा सकते हैं। यह रूटिंग, API हैंडलिंग और इमेज ऑप्टिमाइज़ेशन जैसे फीचर्स पहले से ही प्रदान करता है।

    2. What are the key features of Next.js? (Next.js की मुख्य विशेषताएं क्या हैं?)

    English:
    Key features of Next.js include:

    • Server-Side Rendering (SSR)
    • Static Site Generation (SSG)
    • API routes for creating backend logic
    • Automatic code splitting for faster performance
    • Built-in CSS and Sass support
    • Image optimization and lazy loading

    हिंदी:
    Next.js की मुख्य विशेषताएं:

    • सर्वर-साइड रेंडरिंग (SSR)
    • स्टेटिक साइट जनरेशन (SSG)
    • बैकएंड लॉजिक के लिए API रूट्स
    • तेज प्रदर्शन के लिए ऑटोमैटिक कोड स्प्लिटिंग
    • बिल्ट-इन CSS और Sass का सपोर्ट
    • इमेज ऑप्टिमाइज़ेशन और लेज़ी लोडिंग

    3. How is SSR different from SSG in Next.js? (Next.js में SSR और SSG में क्या अंतर है?)

    English:

    • SSR (Server-Side Rendering): Pages are rendered on the server at runtime for each request. This is useful for dynamic data that changes frequently.
    • SSG (Static Site Generation): Pages are pre-rendered at build time and served as static files. This is ideal for pages with static content.

    हिंदी:

    • SSR (सर्वर-साइड रेंडरिंग): पेज हर अनुरोध पर सर्वर पर रेंडर होते हैं। यह उन डेटा के लिए उपयोगी है जो बार-बार बदलते हैं।
    • SSG (स्टेटिक साइट जनरेशन): पेज बिल्ड टाइम पर प्री-रेंडर होते हैं और स्टेटिक फाइल्स के रूप में सर्व किए जाते हैं। यह स्थिर सामग्री वाले पेजों के लिए उपयुक्त है।

    4. What is the purpose of the _app.js file in Next.js? (_app.js फाइल का क्या उद्देश्य है?)

    English:
    The _app.js file in Next.js is used to override the default application component. It allows you to add global styles, layout components, or logic that needs to be shared across all pages in the app.

    हिंदी:
    Next.js में _app.js फाइल का उपयोग डिफॉल्ट एप्लिकेशन कंपोनेंट को ओवरराइड करने के लिए किया जाता है। यह आपको ग्लोबल स्टाइल्स, लेआउट कंपोनेंट्स, या साझा लॉजिक जोड़ने की अनुमति देता है, जो सभी पेजों में समान रूप से काम करता है।

    5. How does routing work in Next.js? (Next.js में रूटिंग कैसे काम करती है?)

    English:
    Next.js uses a file-based routing system. Each file in the pages directory automatically becomes a route. For example:

    • pages/index.js becomes /
    • pages/about.js becomes /about

    Dynamic routes can be created using square brackets, e.g., pages/[id].js.

    हिंदी:
    Next.js में फ़ाइल-आधारित रूटिंग सिस्टम का उपयोग होता है। pages डायरेक्टरी की हर फ़ाइल अपने आप एक रूट बन जाती है। उदाहरण:

    • pages/index.js / बन जाता है।
    • pages/about.js /about बन जाता है।

    डायनामिक रूट्स बनाने के लिए स्क्वायर ब्रैकेट्स का उपयोग किया जाता है, जैसे pages/[id].js।

    6. What is the role of the getStaticProps function? (getStaticProps फंक्शन का क्या उपयोग है?)

    English:
    getStaticProps is used in Next.js to fetch data at build time for Static Site Generation (SSG). It returns an object containing the props to be passed to the component.

    हिंदी:
    getStaticProps का उपयोग Next.js में बिल्ड टाइम पर डेटा प्राप्त करने के लिए किया जाता है, जो स्टेटिक साइट जनरेशन (SSG) के लिए आवश्यक है। यह एक ऑब्जेक्ट रिटर्न करता है जिसमें कंपोनेंट को पास किए जाने वाले प्रॉप्स होते हैं।

    7. Explain getServerSideProps in Next.js? (Next.js में getServerSideProps को समझाएं?)

    English:
    getServerSideProps fetches data on every request at runtime, making it suitable for Server-Side Rendering (SSR). It ensures the page always has the most updated data.

    हिंदी:
    getServerSideProps हर अनुरोध पर रनटाइम में डेटा प्राप्त करता है, जिससे यह सर्वर-साइड रेंडरिंग (SSR) के लिए उपयुक्त बनता है। यह सुनिश्चित करता है कि पेज पर हमेशा नवीनतम डेटा हो।

    8. What is the difference between Link and a in Next.js? (Next.js में Link और a में क्या अंतर है?)

    English:

    • Link: Used for client-side navigation in Next.js, enabling fast transitions between pages without a full reload.
    • a: Standard HTML tag, causes a full page reload.

    हिंदी:

    • Link: Next.js में क्लाइंट-साइड नेविगेशन के लिए उपयोग किया जाता है, जो पेजों के बीच तेज ट्रांज़िशन प्रदान करता है।
    • a: सामान्य HTML टैग है, जो पूरे पेज को रीलोड करता है।

    9. How can you add custom server logic in Next.js? (Next.js में कस्टम सर्वर लॉजिक कैसे जोड़ें?)

    English:
    You can add custom server logic in Next.js using API routes. Create a file in the pages/api directory, and it will act as an API endpoint.

    हिंदी:
    Next.js में कस्टम सर्वर लॉजिक जोड़ने के लिए API रूट्स का उपयोग किया जा सकता है। pages/api डायरेक्टरी में एक फाइल बनाएं, जो API एन्डपॉइंट के रूप में कार्य करेगी।

    10. What is ISR (Incremental Static Regeneration) in Next.js? (Next.js में ISR क्या है?)

    English:
    ISR allows you to update static content after the site has been built. It re-generates specific pages in the background when a new request is made, based on a revalidation interval.

    हिंदी:
    ISR स्टेटिक कंटेंट को साइट बिल्ड होने के बाद अपडेट करने की सुविधा देता है। यह बैकग्राउंड में पेज को पुनः जनरेट करता है, जब एक नया अनुरोध किया जाता है, और यह रिवैलिडेशन इंटरवल पर आधारित होता है।

    11. How do you handle environment variables in Next.js? (Next.js में environment variables को कैसे हैंडल करते हैं?)

    English:
    Next.js uses environment variables to store sensitive data like API keys, database credentials, and configuration values. These variables are defined in .env files located at the root of the project. Next.js supports three types of .env files:

    • .env.local: For local development.
    • .env.development: For the development environment.
    • .env.production: For the production environment.

    To access these variables in your application, prefix the variable name with NEXT_PUBLIC_ if it needs to be exposed to the client-side. For example:

    Define in .env.local:

    NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=12345abcd

    Access in the code:

    console.log(process.env.NEXT_PUBLIC_API_URL); // Accessible on the client-side
console.log(process.env.SECRET_API_KEY); // Accessible only on the server-side

    Ensure that variables not prefixed with NEXT_PUBLIC_ remain secure and are only accessible on the server-side.

    हिंदी:
    Next.js में environment variables का उपयोग संवेदनशील डेटा (जैसे API keys, डेटाबेस credentials, और configuration values) को स्टोर करने के लिए किया जाता है। ये वेरिएबल्स प्रोजेक्ट की रूट डायरेक्टरी में .env फाइल्स में परिभाषित किए जाते हैं। Next.js तीन प्रकार की .env फाइल्स को सपोर्ट करता है:

    • .env.local: लोकल डेवलपमेंट के लिए।
    • .env.development: डेवलपमेंट एन्वायरनमेंट के लिए।
    • .env.production: प्रोडक्शन एन्वायरनमेंट के लिए।

    एप्लिकेशन में इन वेरिएबल्स को एक्सेस करने के लिए, यदि वेरिएबल्स को क्लाइंट-साइड पर उपयोग करना है, तो उन्हें NEXT_PUBLIC_ से शुरू करें।

    उदाहरण (.env.local में):

    NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=12345abcd

    कोड में एक्सेस करें:

    console.log(process.env.NEXT_PUBLIC_API_URL); // क्लाइंट-साइड पर एक्सेस किया जा सकता है
console.log(process.env.SECRET_API_KEY); // केवल सर्वर-साइड पर एक्सेस किया जा सकता है

    जो वेरिएबल्स NEXT_PUBLIC_ से शुरू नहीं होते हैं, वे सुरक्षित रहते हैं और केवल सर्वर-साइड पर उपयोग किए जा सकते हैं।

    12. What are the main differences between Next.js and Create React App? (Next.js और Create React App के बीच मुख्य अंतर क्या हैं?)

    English:
    Next.js and Create React App (CRA) are both tools for building React applications, but they serve different purposes and offer unique features. Here’s a comparison:

    1. Rendering Modes:
      • Next.js supports Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) in addition to Client-Side Rendering (CSR).
      • Create React App only supports Client-Side Rendering (CSR).
    2. Routing:
      • Next.js has a built-in file-based routing system. Each file in the pages directory automatically becomes a route.
      • CRA relies on third-party libraries like React Router for routing.
    3. SEO Support:
      • Next.js excels in SEO as it supports SSR and SSG, allowing pages to load with fully-rendered content that search engines can easily index.
      • CRA is less SEO-friendly because it depends on CSR, where content is rendered after JavaScript loads.
    4. API Integration:
      • Next.js provides built-in API routes, allowing you to create server-side logic directly in your project.
      • CRA lacks this feature and requires an external server setup for backend logic.
    5. Performance:
      • Next.js optimizes performance with features like automatic code splitting, image optimization, and faster initial page loads using SSR/SSG.
      • CRA depends on client-side rendering, which can lead to slower initial page loads for larger applications.
    6. Use Case:
      • Next.js is ideal for complex, scalable applications that require server-side rendering, static generation, and SEO optimization.
      • CRA is suitable for smaller projects or when you need a quick setup for purely client-side applications.

    हिंदी:
    Next.js और Create React App (CRA) दोनों React एप्लिकेशन बनाने के टूल्स हैं, लेकिन उनके उपयोग और फीचर्स में काफी अंतर है। आइए इनकी तुलना करते हैं:

    1. रेंडरिंग मोड्स:
      • Next.js में Server-Side Rendering (SSR), Static Site Generation (SSG), और Incremental Static Regeneration (ISR) का सपोर्ट है, साथ ही Client-Side Rendering (CSR) भी।
      • CRA केवल Client-Side Rendering (CSR) का समर्थन करता है।
    2. रूटिंग:
      • Next.js में बिल्ट-इन फाइल-बेस्ड रूटिंग सिस्टम है, जहां pages डायरेक्टरी की हर फाइल एक रूट बन जाती है।
      • CRA में रूटिंग के लिए React Router जैसे थर्ड-पार्टी लाइब्रेरी की आवश्यकता होती है।
    3. SEO सपोर्ट:
      • Next.js SEO में बेहतर है क्योंकि यह SSR और SSG को सपोर्ट करता है, जिससे पेज पहले से ही रेंडर किए हुए कंटेंट के साथ लोड होते हैं और सर्च इंजन आसानी से इंडेक्स कर सकते हैं।
      • CRA कम SEO-फ्रेंडली है क्योंकि यह CSR पर निर्भर करता है, जिसमें कंटेंट जावास्क्रिप्ट लोड होने के बाद रेंडर होता है।
    4. API इंटीग्रेशन:
      • Next.js में बिल्ट-इन API रूट्स होते हैं, जो आपको अपने प्रोजेक्ट में ही सर्वर-साइड लॉजिक बनाने की सुविधा देते हैं।
      • CRA में यह फीचर नहीं है और बैकएंड लॉजिक के लिए बाहरी सर्वर की आवश्यकता होती है।
    5. परफॉर्मेंस:
      • Next.js परफॉर्मेंस को ऑप्टिमाइज़ करता है जैसे ऑटोमैटिक कोड स्प्लिटिंग, इमेज ऑप्टिमाइज़ेशन और SSR/SSG से तेज़ पेज लोडिंग।
      • CRA केवल क्लाइंट-साइड रेंडरिंग पर निर्भर करता है, जो बड़े एप्लिकेशन के लिए धीमी शुरुआत का कारण बन सकता है।
    6. उपयोग का मामला:
      • Next.js जटिल, स्केलेबल एप्लिकेशन के लिए उपयुक्त है, जहां SSR, स्टेटिक जनरेशन, और SEO ऑप्टिमाइज़ेशन की आवश्यकता हो।
      • CRA छोटे प्रोजेक्ट्स या केवल क्लाइंट-साइड एप्लिकेशन के लिए जल्दी सेटअप के लिए उपयुक्त है।

    13. How do you implement authentication in Next.js? (Next.js में ऑथेंटिकेशन को कैसे लागू करें?)

    Answer (English):
    Authentication in Next.js can be implemented using various approaches, depending on the requirements (e.g., client-side, server-side, or API-based). Here’s a general overview:

    1. Using JWT (JSON Web Tokens):
    JWT is a popular method for authentication in Next.js applications.

    • When a user logs in, the server generates a JWT and sends it to the client.
    • The token is stored in cookies or local storage for subsequent requests.
    • Use middleware to validate the JWT on protected routes.

    Steps:

    1. Create an API route for login:
      // pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
    const { username, password } = req.body;

    // Validate credentials (example)
    if (username === 'user' && password === 'password') {
        const token = jwt.sign({ username }, 'your_secret_key', { expiresIn: '1h' });
        res.status(200).json({ token });
    } else {
        res.status(401).json({ message: 'Invalid credentials' });
    }
}

       

    2. Store the token on the client side using cookies or local storage.
    3. Protect pages using server-side validation:
      // pages/protected.js
import { verify } from 'jsonwebtoken';

export async function getServerSideProps(context) {
    const token = context.req.cookies.token;

    if (!token) {
        return { redirect: { destination: '/login', permanent: false } };
    }

    try {
        verify(token, 'your_secret_key');
        return { props: {} };
    } catch (err) {
        return { redirect: { destination: '/login', permanent: false } };
    }
}

export default function ProtectedPage() {
    return <div>Welcome to the protected page!</div>;
}

       

    2. Using NextAuth.js:
    NextAuth.js is a library specifically designed for authentication in Next.js. It supports various providers (e.g., Google, GitHub) and custom credentials.

    Steps:

    1. Install the library:
      npm install next-auth

       

    2. Configure a NextAuth API route:
      // pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
    providers: [
        Providers.Credentials({
            name: 'Credentials',
            authorize: async (credentials) => {
                // Validate user credentials here
                const user = { id: 1, name: 'John Doe' };
                return user || null;
            },
        }),
    ],
    secret: 'your_secret_key',
});

       

    3. Protect a page with authentication:
      // pages/protected.js
import { useSession, signIn } from 'next-auth/react';

export default function ProtectedPage() {
    const { data: session } = useSession();

    if (!session) {
        return (
            <div>
                <p>You are not signed in.</p>
                <button onClick={() => signIn()}>Sign in</button>
            </div>
        );
    }

    return <div>Welcome, {session.user.name}!</div>;
}

       

    3. OAuth Authentication:
    Use third-party providers like Google, Facebook, or GitHub with libraries like NextAuth.js or Passport.js to implement OAuth.

    Answer (हिंदी):
    Next.js में ऑथेंटिकेशन को कई तरीकों से लागू किया जा सकता है, जैसे क्लाइंट-साइड, सर्वर-साइड, या API आधारित। यहां प्रमुख तरीके बताए गए हैं:

    1. JWT (JSON Web Tokens) का उपयोग:
    JWT एक लोकप्रिय तरीका है जिसमें लॉगिन के बाद सर्वर JWT जेनरेट करता है और इसे क्लाइंट को भेजता है। यह टोकन लोकल स्टोरेज या कुकीज में स्टोर किया जाता है और हर अनुरोध पर वेरीफाई किया जाता है।

    उदाहरण:

    • API रूट बनाएं:
      // pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
    const { username, password } = req.body;

    if (username === 'user' && password === 'password') {
        const token = jwt.sign({ username }, 'your_secret_key', { expiresIn: '1h' });
        res.status(200).json({ token });
    } else {
        res.status(401).json({ message: 'Invalid credentials' });
    }
}

       

    • प्रोटेक्टेड पेज वेरीफाई करें:
      // pages/protected.js
import { verify } from 'jsonwebtoken';

export async function getServerSideProps(context) {
    const token = context.req.cookies.token;

    if (!token) {
        return { redirect: { destination: '/login', permanent: false } };
    }

    try {
        verify(token, 'your_secret_key');
        return { props: {} };
    } catch (err) {
        return { redirect: { destination: '/login', permanent: false } };
    }
}

export default function ProtectedPage() {
    return <div>Welcome to the protected page!</div>;
}

       

    2. NextAuth.js का उपयोग:
    NextAuth.js Next.js के लिए एक विशेष ऑथेंटिकेशन लाइब्रेरी है। यह Google, GitHub जैसे प्रदाताओं और कस्टम क्रेडेंशियल्स को सपोर्ट करता है।

    • इंस्टॉल करें:
      npm install next-auth

       

    • API रूट बनाएं और पेज प्रोटेक्ट करें।

     

    3. OAuth का उपयोग:
    Google, Facebook, या GitHub जैसे थर्ड-पार्टी प्रदाताओं के साथ OAuth को लागू करने के लिए NextAuth.js या Passport.js का उपयोग करें।

    इन तरीकों से आप Next.js में सुरक्षित और प्रभावी ऑथेंटिकेशन लागू कर सकते हैं।

    यह भी जानें

    क्लाइमेटजीपीटी — जलवायु असत्यापन से लड़ने वाला एक ओपन सोर्स AI प्लेटफार्म Good Vibes Only

    क्लाइमेटजीपीटी – जलवायु असत्यापन से लड़ने वाला एक ओपन सोर्स AI प्लेटफार्म

    The worlds top 10 most powerful nuclear nations Good Vibes Only

    विश्व के शीर्ष 10 सबसे शक्तिशाली परमाणु राष्ट्र

    complete guide to gpus in hindi Good Vibes Only

    GPU: ग्राफिक्स प्रोसेसिंग यूनिट की विस्तृत जानकारी

    इस इंस्टाग्राम कॉपीराइट उल्लंघन के धोखे में न आएं Good Vibes Only

    इस इंस्टाग्राम कॉपीराइट उल्लंघन के धोखे में न आएं



    Table of Contents

    → Index