Junior Next.js Interview Questions (50 MCQs)

Question 1

App Router is largely based on what?

Accepted Answer

React Server Components and nested layouts

Answer

jQuery only

Answer

Removing routing entirely

Answer

Requiring the Pages Router

Question 2

What does SSG mean?

Accepted Answer

Generating HTML at build time

Answer

Render only in the browser

Answer

Removing HTML

Answer

Running SQL on the client

Question 3

Main advantage of `next/link` over internal `<a>`?

Accepted Answer

Client-side navigation and prefetch

Answer

Only better styling

Answer

Required for external links

Answer

Disabling SEO

Question 4

Which structure serves `/blog/my-post` in the App Router?

Accepted Answer

`app/blog/[slug]/page.tsx`

Answer

`app/blog/slug.tsx`

Answer

`pages/blog/:slug.tsx`

Answer

`app/blog/{slug}/index.tsx`

Question 5

What is special about `layout.tsx`?

Accepted Answer

Shared UI preserved across child navigations without re-rendering

Answer

Fully remounts on every navigation

Answer

Only for the 404 page

Answer

Replaces `page.tsx`

Question 6

At what URL is `public/logo.png` served?

Accepted Answer

`/logo.png`

Answer

`/public/logo.png`

Answer

`/static/logo.png`

Answer

`/assets/logo.png`

Question 7

How do you set the page title/description in the App Router?

Accepted Answer

Export `metadata` or `generateMetadata` from a page/layout

Answer

Only with `next/head`

Answer

With `document.title` in useEffect

Answer

In `next.config.ts`

Question 8

What does the `"use client"` directive do?

Accepted Answer

Marks a Client Component boundary so hooks/events work

Answer

Runs the component only in the browser, never SSR

Answer

Makes the component private

Answer

Creates an API route

Question 9

What does `loading.tsx` do?

Accepted Answer

Instant loading UI while the segment loads (via Suspense)

Answer

Preloads files

Answer

Handles errors

Answer

Speeds up builds

Question 10

In the App Router, what makes a folder a publicly accessible route?

Accepted Answer

Having a `page.tsx` (or `route.ts`) file inside it

Answer

Having an `index.tsx` file inside it

Answer

Manually registering it in `next.config.js`

Answer

Having only a `layout.tsx` file

Question 11

Which is true about the root layout (`app/layout.tsx`)?

Accepted Answer

It is required and must render the `` and `` tags

Answer

It's optional; Next.js adds `<html>` automatically

Answer

It must be a Client Component

Answer

It only runs in development mode

Question 12

By default, what kind of components are those inside the `app` directory?

Accepted Answer

Server Components

Answer

Client Components

Answer

Web Components

Answer

Static HTML without React

Question 13

What happens if you use `useState` inside a Server Component?

Accepted Answer

It errors; you must turn the file into a Client Component with `"use client"`

Answer

State is stored on the server and shared between users

Answer

It works, but only after a page refresh

Answer

Next.js silently converts it to `useRef`

Question 14

In the App Router, where do you import `useRouter` from?

Accepted Answer

`next/navigation`

Answer

`next/router`

Answer

`react-router-dom`

Answer

`next/link`

Question 15

To highlight the active link in a nav menu, which hook returns the current path?

Accepted Answer

`usePathname()`

Answer

`useParams()`

Answer

`useLocation()`

Answer

`useRoute()`

Question 16

In a deeply nested Client Component, how do you read the `[id]` dynamic segment?

Accepted Answer

With the `useParams()` hook from `next/navigation`

Answer

With `window.params.id`

Answer

With `process.env.id`

Answer

Only via props; there's no other way

Question 17

In a Server Component, how do you send an unauthenticated user to `/login`?

Accepted Answer

Call `redirect("/login")` from `next/navigation`

Answer

Use `window.location.href = "/login"`

Answer

Use `router.push("/login")` from `useRouter`

Answer

Return `<Navigate to="/login" />`

Question 18

For `app/docs/[...slug]/page.tsx` and the URL `/docs/a/b`, what is `slug`?

Accepted Answer

The array `["a", "b"]`

Answer

The string `"a/b"`

Answer

Only `"b"`

Answer

Only `"a"`

Question 19

How does `[[...slug]]` differ from `[...slug]`?

Accepted Answer

The double-bracket version is optional and also matches the parent path (e.g. `/docs`)

Answer

The double-bracket version only captures two segments

Answer

The double-bracket version only works in the Pages Router

Answer

No difference; it's just style

Question 20

How does a folder named `_components` inside `app` behave?

Accepted Answer

It's a private folder; it and its subfolders are excluded from routing

Answer

It becomes the `/components` route

Answer

It's only served in development

Answer

It causes a build error

Question 21

If you create `app/blog/utils.ts` (no `page.tsx` alongside it), is `/blog/utils` reachable?

Accepted Answer

No; only what `page.tsx` and `route.ts` return is sent to the client

Answer

Yes; every file in `app` is a route

Answer

Yes, but only via POST

Answer

Yes, as a downloadable static file

Question 22

What's the main difference between `template.tsx` and `layout.tsx`?

Accepted Answer

A template creates a new instance on every navigation, resetting state

Answer

A template only renders on the client

Answer

A template replaces `page.tsx`

Answer

A template is only for error pages

Question 23

Why must `error.tsx` start with `"use client"`?

Accepted Answer

Because React error boundaries work on the client and `reset` is interactive

Answer

Because Server Components never throw errors

Answer

Otherwise the page loses SEO

Answer

Because `error.tsx` only works in the Pages Router

Question 24

Which file catches errors thrown in the root layout itself?

Accepted Answer

`app/global-error.tsx`

Answer

`app/error.tsx`

Answer

`app/500.tsx`

Answer

`app/_error.tsx`

Question 25

When is `app/not-found.tsx` shown?

Accepted Answer

For unmatched URLs and wherever `notFound()` is called

Answer

Only when the server returns a 500 error

Answer

Only in development mode

Answer

As a loading state for every page

Question 26

What's the main benefit of using `next/font` for Google Fonts?

Accepted Answer

Fonts are self-hosted and layout shift is reduced

Answer

The browser downloads fonts from Google on each visit

Answer

Fonts render only on the server and never reach the client

Answer

All font weights are inlined into the JS bundle

Question 27

Which prop is required on the `next/image` component?

Accepted Answer

`alt`

Answer

`title`

Answer

`className`

Answer

`loading`

Question 28

For a remote image (external URL) in `next/image` without `fill`, what is required?

Accepted Answer

Specifying `width` and `height`

Answer

Converting the image to base64

Answer

Placing the image in the `app` folder

Answer

Using `"use client"`

Question 29

What config is needed to show an image from `https://cdn.example.com` with `next/image`?

Accepted Answer

Add the host to `images.remotePatterns` in `next.config`

Answer

Add the domain to the `.env` file

Answer

Adding a `<link rel="preconnect">` tag is enough

Answer

Nothing; all domains are allowed

Question 30

What's the default loading behavior of `next/image`?

Accepted Answer

Lazy loading; images load as they near the viewport

Answer

All images load immediately at top priority

Answer

Images only load after a user click

Answer

Images are inlined into the HTML on the server

Question 31

What does the Next.js image optimizer do automatically?

Accepted Answer

Resizes and serves modern formats like WebP to supporting browsers

Answer

Adds a watermark to all images

Answer

Converts every image to SVG

Answer

Uploads images to Google Drive

Question 32

What's the recommended Next.js way to load a third-party script like analytics?

Accepted Answer

The `next/script` component with an appropriate `strategy`

Answer

Putting `<script>` in `next.config.js`

Answer

Importing the script URL inside a Server Component

Answer

Using `eval` inside `useEffect`

Question 33

To run a production Next.js app on a Node server, what's the right command order?

Accepted Answer

`next build`, then `next start`

Answer

`next dev`, then `next build`

Answer

Just `next dev` with `NODE_ENV=production`

Answer

`next start`, then `next build`

Question 34

In `app/api/users/route.ts`, how do you define a handler for GET requests?

Accepted Answer

Export a function named `GET`

Answer

With `export default function handler()`

Answer

With `app.get("/api/users")`

Answer

With a React component that returns JSON

Question 35

Can `page.tsx` and `route.ts` live in the same folder?

Accepted Answer

No; only one of them is allowed per segment

Answer

Yes; GET goes to route, the rest to page

Answer

Yes; page serves mobile, route serves desktop

Answer

Yes; whichever file was created first wins

Question 36

What does the `replace` prop on `<Link>` do?

Accepted Answer

Replaces the current history entry instead of adding a new one

Answer

Swaps page content without changing the URL

Answer

Opens the link in a new tab

Answer

Disables prefetching

Question 37

In the App Router, what's the simplest way to fetch data in a page?

Accepted Answer

Make the Server Component `async` and `await` the data directly

Answer

Use `getServerSideProps`

Answer

Use `useEffect` in every page

Answer

Put the data in `next.config.js`

Question 38

Why can't you put `onClick` on a button directly in a Server Component?

Accepted Answer

Event handlers need client-side JS and functions can't be sent from the server

Answer

Because buttons don't render in Server Components

Answer

Because `onClick` is deprecated in React

Answer

Because Next.js only supports `onPress`

Question 39

Can the `app` folder live inside `src`?

Accepted Answer

Yes; `src/app` is officially supported

Answer

No; `app` must be at the project root

Answer

Only with a separate plugin

Answer

Only if TypeScript is disabled

Question 40

What advantage does `Button.module.css` have over plain CSS?

Accepted Answer

Class names are locally scoped and don't collide

Answer

CSS is generated at runtime with JavaScript

Answer

It only works in Server Components

Answer

All styles are applied globally

Question 41

Where is a global stylesheet (like `globals.css`) usually imported?

Accepted Answer

In the root layout (`app/layout.tsx`)

Answer

In `next.config.js`

Answer

In every Route Handler

Answer

In the `.env` file

Question 42

How does an import like `@/components/Button` work?

Accepted Answer

Via a path alias in the `paths` of `tsconfig.json` or `jsconfig.json`

Answer

`@` means the package is downloaded from npm

Answer

`@` always points to the `public` folder

Answer

It only works in the Pages Router

Question 43

What is `next/dynamic` used for?

Accepted Answer

Lazy-loading components so their code isn't in the initial bundle

Answer

Creating dynamic routes like `[id]`

Answer

Switching a page to dynamic rendering

Answer

Defining dynamic environment variables

Question 44

How do you generate a `sitemap.xml` in the App Router?

Accepted Answer

Create `app/sitemap.ts` returning an array of URLs

Answer

Add `sitemap: true` to `package.json`

Answer

With a Client Component named `Sitemap`

Answer

Next.js can't generate sitemaps

Question 45

What's the simplest way to add a favicon in the App Router?

Accepted Answer

Place `favicon.ico` or `icon.png` at the root of `app`

Answer

Add it to `next.config.js` under `favicon`

Answer

Import it in every page

Answer

Only with `<Head>` from `next/head`

Question 46

What effect does code used only in a Server Component (e.g. a date library) have on the client bundle?

Accepted Answer

None; that code isn't sent to the browser

Answer

The whole library is added to the client bundle

Answer

Half of it is sent to the client

Answer

It's only sent to the client in production

Question 47

Can the `app` and `pages` directories coexist in one project?

Accepted Answer

Yes, for incremental migration, but a route must not be defined in both

Answer

No; the build fails

Answer

Yes; duplicate routes render both pages together

Answer

Only in development

Question 48

In a Client Component, how do you send the user back to the previous history entry?

Accepted Answer

`router.back()` from `useRouter` in `next/navigation`

Answer

`redirect(-1)`

Answer

`notFound()`

Answer

`router.refresh()`

Question 49

In Next.js 15+, how do you read `params` in a Server Component page?

Accepted Answer

`params` is a Promise, so you `await` it

Answer

From `window.location.params`

Answer

Only via `getStaticProps`

Answer

From `process.argv`

Question 50

In a Client Component, which hook reads `?q=shoes` from the URL?

Accepted Answer

`useSearchParams()` then `.get("q")`

Answer

`usePathname()` then `.query.q`

Answer

`useParams().q`

Answer

`useRouter().query.q`

Next.js · Junior · 50

App Router is largely based on what?