Nextjs Framework Practice Exam

Question 1 Nextjs Framework

What is SSR (Server-Side Rendering) in Next.js?

Middleware runs before a request is completed. Defined in middleware.ts at the project root, it can rewrite URLs, redirect, modify headers, or set cookies. It runs on the Edge runtime for low latency. SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers(). useSearchParams from next/navigation returns a read-only URLSearchParams object for the current URL's query string. Example: const searchParams = useSearchParams(); const q = searchParams.get('q'); revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation.

Question 2 Nextjs Framework

What is the difference between layout.tsx and template.tsx?

No. A route segment cannot have both route.ts and page.tsx. The Route Handler would conflict with the page. Place API routes in a separate folder like app/api/. A layout persists across navigations and preserves state. A template (template.tsx) creates a new instance on each navigation — it remounts, re-runs effects, and resets state. Use templates when you need fresh state per route. Create app/api/hello/route.ts:
export async function GET(request: Request) {
return Response.json({ message: 'Hello' });
}
This handles GET /api/hello. Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed.

Question 3 Nextjs Framework

What are Route Groups in the App Router?

Create middleware.ts in the project root:
import { NextResponse } from 'next/server';
export function middleware(request) {
return NextResponse.next();
}
export const config = { matcher: '/dashboard/:path*' }; Route Groups use parentheses in folder names, e.g., (marketing). They organize routes without affecting the URL. Useful for applying different layouts to different sections: app/(shop)/layout.tsx vs app/(blog)/layout.tsx. Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } }) useSearchParams from next/navigation returns a read-only URLSearchParams object for the current URL's query string. Example: const searchParams = useSearchParams(); const q = searchParams.get('q');

Question 4 Nextjs Framework

What are Parallel Routes in Next.js?

Parallel Routes use named slots with @folder convention (e.g., @dashboard, @analytics). They allow rendering multiple pages simultaneously in the same layout, useful for dashboards, modals, and split views. Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed. The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory). By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}.

Question 5 Nextjs Framework

How do environment variables work in Next.js?

Streaming allows the server to send UI in chunks as it becomes ready, rather than waiting for all data. Next.js uses React Suspense boundaries to progressively stream content, improving Time to First Byte (TTFB) and First Contentful Paint (FCP). Variables in .env.local are available on the server. To expose a variable to the browser, prefix it with NEXT_PUBLIC_:

DB_SECRET=xyz — server only
NEXT_PUBLIC_API_URL=https://... — available in client code

A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs. Export a metadata object or a generateMetadata function from layout.tsx or page.tsx:
export const metadata = {
title: 'My App',
description: 'A Next.js app',
};
Next.js merges metadata from parent layouts.

Question 6 Nextjs Framework

How does prefetching work with the Link component?

next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props. next.config.js (or .mjs/.ts) is the main configuration file for Next.js. It controls settings like image domains, redirects, rewrites, environment variables, webpack customization, and experimental features. revalidateTag('posts') purges all cached fetch requests tagged with that label. Tag a fetch with fetch(url, { next: { tags: ['posts'] } }). This enables fine-grained, on-demand cache invalidation across multiple routes. By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}.

Question 7 Nextjs Framework

What is Next.js Middleware?

Middleware runs before a request is completed. Defined in middleware.ts at the project root, it can rewrite URLs, redirect, modify headers, or set cookies. It runs on the Edge runtime for low latency. Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources. Variables in .env.local are available on the server. To expose a variable to the browser, prefix it with NEXT_PUBLIC_:

DB_SECRET=xyz — server only
NEXT_PUBLIC_API_URL=https://... — available in client code

Node.js runtime (default): full Node.js APIs, no cold start limits, runs on the server.
Edge runtime: subset of APIs, faster cold starts, runs at edge locations. Use Edge for simple, latency-sensitive logic; Node.js for complex processing.

Question 8 Nextjs Framework

What is the useRouter hook in Next.js App Router?

useRouter from next/navigation provides programmatic navigation in Client Components:

router.push('/path') — navigate
router.replace('/path') — replace history
router.refresh() — re-fetch server components
router.back() — go back

Several methods:

redirect('/path') — in Server Components/Actions (throws internally)
permanentRedirect('/path') — 308 redirect
next.config.js redirects — declarative redirects
Middleware — conditional redirects
router.push() — client-side redirect

Parallel Routes use named slots with @folder convention (e.g., @dashboard, @analytics). They allow rendering multiple pages simultaneously in the same layout, useful for dashboards, modals, and split views. Server Actions are async functions that run on the server, defined with "use server". They can be called directly from Client or Server Components to handle form submissions and data mutations without creating API endpoints.

Question 9 Nextjs Framework

What is streaming in Next.js?

Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications. Add "use server" at the top of an async function or at the top of a module:
async function createUser(formData: FormData) {
  "use server";
  // insert into database
} Streaming allows the server to send UI in chunks as it becomes ready, rather than waiting for all data. Next.js uses React Suspense boundaries to progressively stream content, improving Time to First Byte (TTFB) and First Contentful Paint (FCP). generateMetadata is an async function for dynamic metadata. It receives params and can fetch data:
export async function generateMetadata({ params }) {
  const post = await getPost(params.id);
  return { title: post.title };
}

Question 10 Nextjs Framework

How do you handle loading states in the App Router?

Middleware runs before a request is completed. Defined in middleware.ts at the project root, it can rewrite URLs, redirect, modify headers, or set cookies. It runs on the Edge runtime for low latency. Parallel Routes use named slots with @folder convention (e.g., @dashboard, @analytics). They allow rendering multiple pages simultaneously in the same layout, useful for dashboards, modals, and split views. Next.js automatically deduplicates identical fetch requests made during a single render pass. If multiple components fetch the same URL with the same options, only one network request is made and the result is shared. Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed.

Question 11 Nextjs Framework

What is a layout in the Next.js App Router?

next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props. useRouter from next/navigation provides programmatic navigation in Client Components:

router.push('/path') — navigate
router.replace('/path') — replace history
router.refresh() — re-fetch server components
router.back() — go back

A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. Use the cache and next.revalidate options:

fetch(url, { cache: 'force-cache' }) — cached (default for GET)
fetch(url, { cache: 'no-store' }) — no caching
fetch(url, { next: { revalidate: 60 } }) — revalidate every 60s

Question 12 Nextjs Framework

What is the Link component in Next.js?

next/link provides a <Link> component for client-side navigation between routes. It prefetches linked pages in the background for faster transitions:
<Link href="/about">About</Link> Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed. Create app/api/hello/route.ts:
export async function GET(request: Request) {
return Response.json({ message: 'Hello' });
}
This handles GET /api/hello. Next.js automatically deduplicates identical fetch requests made during a single render pass. If multiple components fetch the same URL with the same options, only one network request is made and the result is shared.

Question 13 Nextjs Framework

What is the Next.js Image component?

SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers(). Server Components can use async/await directly:
async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data}</div>;
}
No need for useEffect or client-side fetching libraries. next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props. Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed.

Question 14 Nextjs Framework

What is revalidatePath in Next.js?

Create app/api/hello/route.ts:
export async function GET(request: Request) {
return Response.json({ message: 'Hello' });
}
This handles GET /api/hello. Routes are defined by the folder structure inside app/. A route is created by adding a page.tsx file inside a folder. For example, app/about/page.tsx maps to the /about route. revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation. A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs.

Question 15 Nextjs Framework

What is the matcher config in Middleware?

The matcher property in the exported config object specifies which routes the middleware applies to. Example: matcher: ['/dashboard/:path*', '/api/:path*'] runs middleware only on those paths. A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. Intercepting Routes use (..) convention to intercept a route and display it in a different context — commonly used for modals. For example, clicking a photo shows a modal, but navigating directly shows the full page. SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers().

Question 16 Nextjs Framework

When should you use a Client Component vs a Server Component?

The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory). Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources. useRouter from next/navigation provides programmatic navigation in Client Components:

router.push('/path') — navigate
router.replace('/path') — replace history
router.refresh() — re-fetch server components
router.back() — go back

A layout persists across navigations and preserves state. A template (template.tsx) creates a new instance on each navigation — it remounts, re-runs effects, and resets state. Use templates when you need fresh state per route.

Question 17 Nextjs Framework

How does file-based routing work in the App Router?

A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. usePathname from next/navigation returns the current URL pathname as a string (e.g., /dashboard/settings). It is a Client Component hook useful for highlighting active navigation links. By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}. Routes are defined by the folder structure inside app/. A route is created by adding a page.tsx file inside a folder. For example, app/about/page.tsx maps to the /about route.

Question 18 Nextjs Framework

What is a Client Component in Next.js?

A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. A layout persists across navigations and preserves state. A template (template.tsx) creates a new instance on each navigation — it remounts, re-runs effects, and resets state. Use templates when you need fresh state per route. usePathname from next/navigation returns the current URL pathname as a string (e.g., /dashboard/settings). It is a Client Component hook useful for highlighting active navigation links. A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs.

Question 19 Nextjs Framework

How do you define Middleware in Next.js?

A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs. Create middleware.ts in the project root:
import { NextResponse } from 'next/server';
export function middleware(request) {
  return NextResponse.next();
}
export const config = { matcher: '/dashboard/:path*' }; Add "use server" at the top of an async function or at the top of a module:
async function createUser(formData: FormData) {
  "use server";
  // insert into database
} Server Components can use async/await directly:
async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}
No need for useEffect or client-side fetching libraries.

Question 20 Nextjs Framework

How do you define a Server Action?

useRouter from next/navigation provides programmatic navigation in Client Components:

router.push('/path') — navigate
router.replace('/path') — replace history
router.refresh() — re-fetch server components
router.back() — go back

SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers(). Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed. Add "use server" at the top of an async function or at the top of a module:
async function createUser(formData: FormData) {
"use server";
// insert into database
}

Question 21 Nextjs Framework

What is the useSearchParams hook?

useSearchParams from next/navigation returns a read-only URLSearchParams object for the current URL's query string. Example: const searchParams = useSearchParams(); const q = searchParams.get('q'); Next.js automatically deduplicates identical fetch requests made during a single render pass. If multiple components fetch the same URL with the same options, only one network request is made and the result is shared. generateMetadata is an async function for dynamic metadata. It receives params and can fetch data:
export async function generateMetadata({ params }) {
const post = await getPost(params.id);
return { title: post.title };
} A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app.

Question 22 Nextjs Framework

What is revalidateTag in Next.js?

revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation. revalidateTag('posts') purges all cached fetch requests tagged with that label. Tag a fetch with fetch(url, { next: { tags: ['posts'] } }). This enables fine-grained, on-demand cache invalidation across multiple routes. Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications. Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } })

Question 23 Nextjs Framework

What is the usePathname hook?

A layout persists across navigations and preserves state. A template (template.tsx) creates a new instance on each navigation — it remounts, re-runs effects, and resets state. Use templates when you need fresh state per route. import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />
The priority prop disables lazy loading for above-the-fold images. Use fill prop for images with unknown dimensions. usePathname from next/navigation returns the current URL pathname as a string (e.g., /dashboard/settings). It is a Client Component hook useful for highlighting active navigation links. Next.js automatically deduplicates identical fetch requests made during a single render pass. If multiple components fetch the same URL with the same options, only one network request is made and the result is shared.

Question 24 Nextjs Framework

What is SSG (Static Site Generation) in Next.js?

Create middleware.ts in the project root:
import { NextResponse } from 'next/server';
export function middleware(request) {
return NextResponse.next();
}
export const config = { matcher: '/dashboard/:path*' }; A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. next/link provides a <Link> component for client-side navigation between routes. It prefetches linked pages in the background for faster transitions:
<Link href="/about">About</Link> SSG generates HTML at build time. Pages are pre-rendered and served as static files from a CDN. In the App Router, pages without dynamic data are automatically statically generated.

Question 25 Nextjs Framework

What is the difference between the Edge and Node.js runtimes?

The matcher property in the exported config object specifies which routes the middleware applies to. Example: matcher: ['/dashboard/:path*', '/api/:path*'] runs middleware only on those paths. Node.js runtime (default): full Node.js APIs, no cold start limits, runs on the server.
Edge runtime: subset of APIs, faster cold starts, runs at edge locations. Use Edge for simple, latency-sensitive logic; Node.js for complex processing. Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources. Create app/api/hello/route.ts:
export async function GET(request: Request) {
return Response.json({ message: 'Hello' });
}
This handles GET /api/hello.

Question 26 Nextjs Framework

What is the App Router in Next.js?

The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory). next/link provides a <Link> component for client-side navigation between routes. It prefetches linked pages in the background for faster transitions:
<Link href="/about">About</Link> The Edge Runtime is a lightweight JavaScript runtime for Middleware and Route Handlers. It starts faster than Node.js and runs at CDN edge locations for low latency. Opt in with export const runtime = 'edge';. It has limited Node.js API support. Create middleware.ts in the project root:
import { NextResponse } from 'next/server';
export function middleware(request) {
return NextResponse.next();
}
export const config = { matcher: '/dashboard/:path*' };

Question 27 Nextjs Framework

How do you redirect in Next.js?

next/link provides a <Link> component for client-side navigation between routes. It prefetches linked pages in the background for faster transitions:
<Link href="/about">About</Link> Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications. Several methods:

redirect('/path') — in Server Components/Actions (throws internally)
permanentRedirect('/path') — 308 redirect
next.config.js redirects — declarative redirects
Middleware — conditional redirects
router.push() — client-side redirect

Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources.

Question 28 Nextjs Framework

What are Route Handlers in Next.js?

Route Handlers are the App Router equivalent of API routes. Define them in route.ts files (e.g., app/api/users/route.ts). Export named functions like GET, POST, PUT, DELETE that receive a Request object. generateStaticParams is used with dynamic routes to define which paths should be statically generated at build time:
export async function generateStaticParams() {
return [{ slug: 'post-1' }, { slug: 'post-2' }];
} Parallel Routes use named slots with @folder convention (e.g., @dashboard, @analytics). They allow rendering multiple pages simultaneously in the same layout, useful for dashboards, modals, and split views. Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } })

Question 29 Nextjs Framework

How do you create a GET API endpoint in the App Router?

generateStaticParams is used with dynamic routes to define which paths should be statically generated at build time:
export async function generateStaticParams() {
return [{ slug: 'post-1' }, { slug: 'post-2' }];
} A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. Create app/api/hello/route.ts:
export async function GET(request: Request) {
return Response.json({ message: 'Hello' });
}
This handles GET /api/hello. By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}.

Question 30 Nextjs Framework

What is fetch request deduplication in Next.js?

Route Handlers are the App Router equivalent of API routes. Define them in route.ts files (e.g., app/api/users/route.ts). Export named functions like GET, POST, PUT, DELETE that receive a Request object. Pass the Server Action as the action prop on a <form>:
<form action={createUser}>
<input name="email" />
<button type="submit">Submit</button>
</form>
The form works even without JavaScript enabled. next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props. Next.js automatically deduplicates identical fetch requests made during a single render pass. If multiple components fetch the same URL with the same options, only one network request is made and the result is shared.

Question 31 Nextjs Framework

How do you create a dynamic route in the App Router?

revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation. usePathname from next/navigation returns the current URL pathname as a string (e.g., /dashboard/settings). It is a Client Component hook useful for highlighting active navigation links. Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } }) next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props.

Question 32 Nextjs Framework

How do you use the Next.js Image component?

import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />
The priority prop disables lazy loading for above-the-fold images. Use fill prop for images with unknown dimensions. Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources. next.config.js (or .mjs/.ts) is the main configuration file for Next.js. It controls settings like image domains, redirects, rewrites, environment variables, webpack customization, and experimental features. By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}.

Question 33 Nextjs Framework

What is the Edge Runtime in Next.js?

The Edge Runtime is a lightweight JavaScript runtime for Middleware and Route Handlers. It starts faster than Node.js and runs at CDN edge locations for low latency. Opt in with export const runtime = 'edge';. It has limited Node.js API support. No. A route segment cannot have both route.ts and page.tsx. The Route Handler would conflict with the page. Place API routes in a separate folder like app/api/. revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation. Parallel Routes use named slots with @folder convention (e.g., @dashboard, @analytics). They allow rendering multiple pages simultaneously in the same layout, useful for dashboards, modals, and split views.

Question 34 Nextjs Framework

What are Server Actions in Next.js?

The matcher property in the exported config object specifies which routes the middleware applies to. Example: matcher: ['/dashboard/:path*', '/api/:path*'] runs middleware only on those paths. generateStaticParams is used with dynamic routes to define which paths should be statically generated at build time:
export async function generateStaticParams() {
return [{ slug: 'post-1' }, { slug: 'post-2' }];
} Server Actions are async functions that run on the server, defined with "use server". They can be called directly from Client or Server Components to handle form submissions and data mutations without creating API endpoints. The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory).

Question 35 Nextjs Framework

How do you control caching with fetch in the App Router?

Streaming allows the server to send UI in chunks as it becomes ready, rather than waiting for all data. Next.js uses React Suspense boundaries to progressively stream content, improving Time to First Byte (TTFB) and First Contentful Paint (FCP). Use the cache and next.revalidate options:

fetch(url, { cache: 'force-cache' }) — cached (default for GET)
fetch(url, { cache: 'no-store' }) — no caching
fetch(url, { next: { revalidate: 60 } }) — revalidate every 60s

Several methods:

redirect('/path') — in Server Components/Actions (throws internally)
permanentRedirect('/path') — 308 redirect
next.config.js redirects — declarative redirects
Middleware — conditional redirects
router.push() — client-side redirect

An optional catch-all uses [[...slug]] syntax. It matches the parent route as well, e.g., app/docs/[[...slug]]/page.tsx matches both /docs and /docs/a/b.

Question 36 Nextjs Framework

What is a catch-all route in Next.js?

SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers(). A catch-all route uses [...slug] syntax, e.g., app/docs/[...slug]/page.tsx. It matches /docs/a, /docs/a/b, etc. The params are returned as an array: params.slug = ['a', 'b']. The Edge Runtime is a lightweight JavaScript runtime for Middleware and Route Handlers. It starts faster than Node.js and runs at CDN edge locations for low latency. Opt in with export const runtime = 'edge';. It has limited Node.js API support. Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications.

Question 37 Nextjs Framework

Can a route.ts and page.tsx exist in the same folder?

Server Actions are async functions that run on the server, defined with "use server". They can be called directly from Client or Server Components to handle form submissions and data mutations without creating API endpoints. No. A route segment cannot have both route.ts and page.tsx. The Route Handler would conflict with the page. Place API routes in a separate folder like app/api/. Several methods:

redirect('/path') — in Server Components/Actions (throws internally)
permanentRedirect('/path') — 308 redirect
next.config.js redirects — declarative redirects
Middleware — conditional redirects
router.push() — client-side redirect

An optional catch-all uses [[...slug]] syntax. It matches the parent route as well, e.g., app/docs/[[...slug]]/page.tsx matches both /docs and /docs/a/b.

Question 38 Nextjs Framework

What is generateMetadata used for?

useSearchParams from next/navigation returns a read-only URLSearchParams object for the current URL's query string. Example: const searchParams = useSearchParams(); const q = searchParams.get('q'); Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } }) generateMetadata is an async function for dynamic metadata. It receives params and can fetch data:
export async function generateMetadata({ params }) {
const post = await getPost(params.id);
return { title: post.title };
} next.config.js (or .mjs/.ts) is the main configuration file for Next.js. It controls settings like image domains, redirects, rewrites, environment variables, webpack customization, and experimental features.

Question 39 Nextjs Framework

What are Intercepting Routes?

Route Groups use parentheses in folder names, e.g., (marketing). They organize routes without affecting the URL. Useful for applying different layouts to different sections: app/(shop)/layout.tsx vs app/(blog)/layout.tsx. An optional catch-all uses [[...slug]] syntax. It matches the parent route as well, e.g., app/docs/[[...slug]]/page.tsx matches both /docs and /docs/a/b. Intercepting Routes use (..) convention to intercept a route and display it in a different context — commonly used for modals. For example, clicking a photo shows a modal, but navigating directly shows the full page. The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory).

Question 40 Nextjs Framework

How do you use a Server Action with a form?

Pass the Server Action as the action prop on a <form>:
<form action={createUser}>
<input name="email" />
<button type="submit">Submit</button>
</form>
The form works even without JavaScript enabled. SSG generates HTML at build time. Pages are pre-rendered and served as static files from a CDN. In the App Router, pages without dynamic data are automatically statically generated. Create an error.tsx file (must be a Client Component). It acts as a React Error Boundary and catches errors in its route segment and children. It receives error and reset props to display a fallback and retry. By default, Next.js prefetches routes linked with <Link> when they enter the viewport. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx boundary. Disable with prefetch={false}.

Question 41 Nextjs Framework

How do you set metadata in the App Router?

SSG generates HTML at build time. Pages are pre-rendered and served as static files from a CDN. In the App Router, pages without dynamic data are automatically statically generated. Export a metadata object or a generateMetadata function from layout.tsx or page.tsx:
export const metadata = {
title: 'My App',
description: 'A Next.js app',
};
Next.js merges metadata from parent layouts. Create a loading.tsx file in a route segment. Next.js automatically wraps the page in a React Suspense boundary and shows the loading component while the page content is being fetched or streamed. Routes are defined by the folder structure inside app/. A route is created by adding a page.tsx file inside a folder. For example, app/about/page.tsx maps to the /about route.

Question 42 Nextjs Framework

How does data fetching work in Server Components?

revalidatePath('/blog') purges the cached data for a specific path on demand. Use it inside Server Actions or Route Handlers after a mutation to ensure users see fresh content without waiting for the timed revalidation. Server Actions are async functions that run on the server, defined with "use server". They can be called directly from Client or Server Components to handle form submissions and data mutations without creating API endpoints. Server Components can use async/await directly:
async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data}</div>;
}
No need for useEffect or client-side fetching libraries. Use Client Components when you need:

Event listeners (onClick, onChange)
React hooks (useState, useEffect)
Browser-only APIs

Use Server Components for everything else — data fetching, static content, and accessing backend resources.

Question 43 Nextjs Framework

What is a Server Component in Next.js?

A Server Component renders on the server and sends HTML to the client. It is the default in the App Router. Server Components can directly access databases, read files, and fetch data without exposing secrets to the client. next/image provides an optimized <Image> component that automatically handles lazy loading, responsive sizing, format conversion (WebP/AVIF), and preventing layout shift with required width/height or fill props. Route Handlers are the App Router equivalent of API routes. Define them in route.ts files (e.g., app/api/users/route.ts). Export named functions like GET, POST, PUT, DELETE that receive a Request object. The Edge Runtime is a lightweight JavaScript runtime for Middleware and Route Handlers. It starts faster than Node.js and runs at CDN edge locations for low latency. Opt in with export const runtime = 'edge';. It has limited Node.js API support.

Question 44 Nextjs Framework

What is ISR (Incremental Static Regeneration)?

ISR allows you to update static pages after the site has been built. You set a revalidate time (in seconds) so that stale pages are regenerated in the background. Example: fetch(url, { next: { revalidate: 60 } }). Route Handlers are the App Router equivalent of API routes. Define them in route.ts files (e.g., app/api/users/route.ts). Export named functions like GET, POST, PUT, DELETE that receive a Request object. Create app/api/hello/route.ts:
export async function GET(request: Request) {
  return Response.json({ message: 'Hello' });
}
This handles GET /api/hello. generateMetadata is an async function for dynamic metadata. It receives params and can fetch data:
export async function generateMetadata({ params }) {
  const post = await getPost(params.id);
  return { title: post.title };
}

Question 45 Nextjs Framework

What is Next.js?

A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. Middleware runs before a request is completed. Defined in middleware.ts at the project root, it can rewrite URLs, redirect, modify headers, or set cookies. It runs on the Edge runtime for low latency. A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs. Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications.

Question 46 Nextjs Framework

What is the not-found.tsx file used for?

next/link provides a <Link> component for client-side navigation between routes. It prefetches linked pages in the background for faster transitions:
<Link href="/about">About</Link> not-found.tsx renders a custom 404 page for a route segment. It is triggered when notFound() is called or when no matching route is found. Place it in app/ for a global 404 page. Routes are defined by the folder structure inside app/. A route is created by adding a page.tsx file inside a folder. For example, app/about/page.tsx maps to the /about route. The matcher property in the exported config object specifies which routes the middleware applies to. Example: matcher: ['/dashboard/:path*', '/api/:path*'] runs middleware only on those paths.

Question 47 Nextjs Framework

What is an optional catch-all route?

An optional catch-all uses [[...slug]] syntax. It matches the parent route as well, e.g., app/docs/[[...slug]]/page.tsx matches both /docs and /docs/a/b. A layout persists across navigations and preserves state. A template (template.tsx) creates a new instance on each navigation — it remounts, re-runs effects, and resets state. Use templates when you need fresh state per route. Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications. Pass the Server Action as the action prop on a <form>:
<form action={createUser}>
<input name="email" />
<button type="submit">Submit</button>
</form>
The form works even without JavaScript enabled.

Question 48 Nextjs Framework

How do you handle errors in the App Router?

SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers(). A layout.tsx file defines UI that is shared across child routes. Layouts preserve state and do not re-render when navigating between sibling routes. The root layout (app/layout.tsx) is required and wraps the entire app. No. A route segment cannot have both route.ts and page.tsx. The Route Handler would conflict with the page. Place API routes in a separate folder like app/api/. Create an error.tsx file (must be a Client Component). It acts as a React Error Boundary and catches errors in its route segment and children. It receives error and reset props to display a fallback and retry.

Question 49 Nextjs Framework

What is generateStaticParams in Next.js?

SSG generates HTML at build time. Pages are pre-rendered and served as static files from a CDN. In the App Router, pages without dynamic data are automatically statically generated. No. A route segment cannot have both route.ts and page.tsx. The Route Handler would conflict with the page. Place API routes in a separate folder like app/api/. Server Components can use async/await directly:
async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}
No need for useEffect or client-side fetching libraries. generateStaticParams is used with dynamic routes to define which paths should be statically generated at build time:
export async function generateStaticParams() {
  return [{ slug: 'post-1' }, { slug: 'post-2' }];
}

Question 50 Nextjs Framework

What is the purpose of next.config.js?

Server Components can use async/await directly:
async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data}</div>;
}
No need for useEffect or client-side fetching libraries. next.config.js (or .mjs/.ts) is the main configuration file for Next.js. It controls settings like image domains, redirects, rewrites, environment variables, webpack customization, and experimental features. Node.js runtime (default): full Node.js APIs, no cold start limits, runs on the server.
Edge runtime: subset of APIs, faster cold starts, runs at edge locations. Use Edge for simple, latency-sensitive logic; Node.js for complex processing. useSearchParams from next/navigation returns a read-only URLSearchParams object for the current URL's query string. Example: const searchParams = useSearchParams(); const q = searchParams.get('q');