Next.jsReactInterview PrepFrontend

50 Next.js Interview Questions & Answers

August 19, 202635 min read

Most Next.js interview question banks (this one included) were written for the Pages Router era — getStaticProps, getServerSideProps, pages/api. The App Router (stable since Next 13, and what current Next.js projects — including this site — actually build on) replaced most of that with Server Components and a different data-fetching model. This covers every question as asked, with the Pages Router API explained accurately, and the current App Router equivalent noted alongside it so the answer is useful either way.

0 / 50 blocks read

Next.js Fundamentals

Q1. What is Next.js and what are its main features?

Next.js is a React framework adding the pieces a production app needs beyond bare React — routing, server-side rendering, static generation, API endpoints, image optimization, and a build/deploy pipeline, all with sensible defaults instead of hand-assembling them from separate libraries. Its core value proposition has stayed consistent even as the underlying implementation (Pages Router → App Router) changed significantly.

Q2. How does Next.js differ from Create React App?

	Create React App	Next.js
Rendering	Client-side only (a single index.html + JS bundle)	Server-side rendering, static generation, and client-side, per-route
Routing	You add a router yourself (React Router)	Built in — file-based, no extra library needed
Status	Officially deprecated by the React team	Actively developed, one of the React team's recommended frameworks

Q3. What command is used to create a new Next.js app?

bash

npx create-next-app@latest my-app
cd my-app
npm run dev

Q4. How does Next.js handle server-side rendering (SSR)?

javascript

// Pages Router — re-runs on every request
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// App Router — a Server Component fetches directly, no special export needed
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

In the Pages Router, getServerSideProps runs on the server for every request and its returned props hydrate the page. In the App Router, Server Components fetch data directly inside the component itself (just an async function component) — Next.js decides whether to render it dynamically per-request or statically at build time based on how the data is fetched, without a separate special-named export.

Q5. Can you explain the purpose of the pages directory in a Next.js project?

In the Pages Router, every file under pages/ automatically becomes a route — pages/about.js is /about, pages/blog/[slug].js is a dynamic /blog/:slug route. The App Router replaces this with an app/ directory using folders (not files) as route segments, each containing a page.js — the same file-system-as-routing philosophy, restructured.

Q6. In Next.js, how do you create a page that is rendered on the server for every request?

javascript

// Pages Router
export async function getServerSideProps(context) {
  return { props: { time: new Date().toISOString() } };
}

// App Router — opt out of caching to force per-request rendering
export const dynamic = "force-dynamic";
export default async function Page() {
  const time = new Date().toISOString();
  return <div>{time}</div>;
}

Q7. What file extensions does Next.js support for pages?

.js, .jsx, .ts, and .tsx — TypeScript support is built in with zero extra configuration; Next.js auto-detects a tsconfig.json (or creates one) and handles the compilation itself.

Q8. How do environment variables work in Next.js?

bash

# .env.local
DATABASE_URL=postgres://...
NEXT_PUBLIC_API_URL=https://api.example.com

Variables in .env.local are available server-side automatically; only variables explicitly prefixed with NEXT_PUBLIC_ are also inlined into the client-side JS bundle at build time. This prefix requirement is a deliberate safety rail — it's much harder to accidentally leak a secret (a database URL, an API key) into the browser bundle than if all env vars were exposed by default.

Q9. What is Automatic Static Optimization in Next.js?

In the Pages Router, a page with no getServerSideProps/getInitialProps is automatically pre-rendered to static HTML at build time — zero configuration required to get a fast, CDN-cacheable page. The App Router carries the same philosophy forward as its default: a route is statically rendered at build time unless something in it (a dynamic data fetch, force-dynamic) requires per-request rendering.

Pages and Routing

Q10. How does file-based routing work in Next.js?

File path	Pages Router route	App Router equivalent
index.js	/	app/page.js
about.js	/about	app/about/page.js
blog/[slug].js	/blog/:slug	app/blog/[slug]/page.js

In both routers, the file system directly defines the route structure — no separate route-configuration file to maintain in sync with the actual pages, unlike a traditional SPA router where routes are declared in code separately from the components they render.

Page15

Enjoyed this?

Let's talk about building something together.

Get in touch