Basic Interview Questions
What is Next.js and why use it instead of plain React?
Next.js is a React framework that adds file-based routing, server rendering (SSR, SSG, ISR, streaming), React Server Components, data fetching and caching, Server Actions and Route Handlers for backend code, and built-in optimisation for images, fonts and scripts. Plain React (Vite) is a client-side library: you add a router, a data layer and SEO handling yourself. Choose Next.js for public, SEO-sensitive or full-stack apps; plain React is fine for internal SPAs.
What is the difference between the App Router and the Pages Router?
| Pages Router | App Router | |
|---|---|---|
| Folder | pages/ | app/ |
| Components | Client by default | Server Components by default |
| Data | getServerSideProps / getStaticProps | async components, fetch options, 'use cache' |
| Layouts | _app, manual | Nested layout.tsx |
| Mutations | API routes | Server Actions + Route Handlers |
The App Router is the recommended router for new apps; both can exist in one project during migration.
What do npm run dev, build and start do?
next dev: development server with Fast Refresh and detailed errors; pages compile on demand.next build: production build into.next/: compiles, type-checks, lints and pre-renders static routes; prints the route table (○ static, ● SSG, ƒ dynamic).next start: serves the production build. Never deploynext dev.
How do environment variables work in Next.js?
Next.js loads .env, .env.local, .env.development/.env.production. Variables are server-only by default. Only names starting with NEXT_PUBLIC_ are exposed to the browser, and those are inlined at build time, so changing them needs a rebuild. Never put secrets in NEXT_PUBLIC_ variables.