Next.js Interview Questions -Topic Wise

BASICS OF NEXT.JS

1. What are main features of Next.js ?

   Next.js have features like -

   → Server side rendering

   → Static site rendering

   → API Routes for serverless functions

   → Automatic code splitting

   → Fast Refresh for development

2. Diffrence between React.js and Next.js ?

   ReactJS - CSR method used , limited performence , Poor SEO , No Backend Support

   NextJS- SSR , SSG , CSR , ISR method used , High or Optimized performence , Exceellent SEO

   RENDERING & PRE-RENDERING

3. What is Pre-rendering in Next.js ?

   Pre-rendering means generating HTML in advance instead of on the client side. Next.js supports:

   1. Static Generation (SSG) – HTML generated at build time

   2. Server-Side Rendering (SSR) – HTML generated on each request

4. Explain difference between SSR, SSG, CSR, and ISR.

   SSG (getStaticProps) → HTML generated at build time. (Ex: Blog posts → SSG)

   SSR (getServerSideProps) → HTML generated on each request.(Ex: Dashboard with real-time data)

   CSR → Client fetches data after page load.

   ISR → Regenerates static pages after deployment at intervals.

5. When to use getStaticProps, getServerSideProps, and getStaticPaths?

• getStaticProps → Fetch data at build time (SSG).

• getServerSideProps → Fetch data at request time (SSR).

• getStaticPaths → Define dynamic routes for SSG.

ROUTING AND NAVIGATION

6. Diffrence b/w <Link> and <a> in next.js ?

   • <Link> → Client-side navigation (fast, SPA-like).

   • <a> → Full page reload.

7. How do you create dynamic routes in Next.js?

   Use square brackets:

    pages/blog/[id].js → /blog/1, /blog/2
   

8. How to do programmatic navigation in Next.js?

   Using useRouter hook:

    import { useRouter } from 'next/router';
    const router = useRouter();
    router.push('/dashboard');
   

9. Diffrence b/w Page router and App Router ?

   Page Router - File based , server componets and server actions not supported

   App Router - File-based with layouts, nested routing , server component and server actions are supported

API ROUTES AND BACKEND INTEGRATION

10. How do you create API Routes in App router ?

    Inside app/api/.

    // app/api/hello/route.js
    export async function GET() {
      return Response.json({ message: "Hello API" });
    }
    

11. How do you handle POST requests in App Router API routes?

    export async function POST(req) {
      const body = await req.json();
      return Response.json({ name: body.name });
    }
    

12. What are Server Actions in Next.js?

    • Run server-side functions directly from components.

    • No need for API routes for small mutations.

        "use server";
        export async function addTodo(formData) {
          const todo = formData.get("todo");
          // save to DB
        }
      

AUTHENTICATION & SECURITY

13. How to implement authentication in App Router?

    • Use Middleware for route protection.

    • Use libraries like NextAuth.js (Auth.js).

14. How do you use Middleware in App Router?

    Create middleware.js at root.

    import { NextResponse } from "next/server";
    export function middleware(req) {
      if (!req.cookies.get("token")) {
        return NextResponse.redirect(new URL("/login", req.url));
      }
    }
    

PERFORMENCE OPTIMIZATION

15. How does Next.js(App router) improve SEO ?

    • SSR : SSR sends pre-rendered HTML page to the browser , that allow search engnies to index content properly.

    • Automatic metadata api : Search engines rely on meta tags for page indexing.

    • Server Components (no JS needed on client).

16. What is streaming in Next.js?

    Send parts of page as soon as ready using React Suspense.

    Suspense is a React component that lets you "wait" for some part of the component tree to load

    <Suspense fallback={<Loading />}>
      <Comments />
    </Suspense>
    

17. How do you optimize images in Next.js?

    Use next/image:

    import Image from "next/image";
    <Image src="/me.png" width={500} height={500} alt="me" />
    

OTHER TOPICS

18. How do you use metadata in App Router?

    export const metadata = {
      title: "Home Page",
      description: "This is SEO friendly",
    };
    

19. Difference between Client and Server Components?

    Server Component - runs only on the server and can not use browser only features and react hooks like useState(), useEffect(), localStorage , or event listeners like onClick , onChange

    Client Component - runs in the browser. It supports interactivity, state, effects, and all browser APIs.

    To use client component we explicitally write “use client” at the top.

20. What is route groups in App Router?

    Group routes without affecting URL.

    app/(auth)/login/page.js → /login
    

21. What is revalidation tag and path in App Router?

    Programmatically revalidate cache.

    revalidatePath("/dashboard");
    revalidateTag("products");
    

22. Difference between SSR in Pages Router vs App Router?

    • Pages: SSR with getServerSideProps.

    • App: SSR via dynamic fetch (no-store).

23. What is difference between cache: "no-store" and { revalidate: X }?

    • "no-store" → No cache, always fresh.

    • revalidate: X → ISR caching.

24. What is difference between loading.js vs Suspense fallback?

    • loading.js → Route-level loading.

    • Suspense → Component-level loading.

25. What is the role of usePathname and useSearchParams?

    Hooks for reading client-side routing info.

     "use client"
     // page url : http://localhost:3000/cart?search=product1&randomVal=lol
     import { usePathname, useSearchParams } from "next/navigation"
     export default function Cart(){
         const pathName = usePathname()
         console.log(pathName)  // /cart
         const serachParams = useSearchParams()
         console.log(serachParams.get('search') , serachParams.get('randomVal')) // product1 lol
         return <div>
             <h1> This is Cart Page</h1>
         </div>
     }