Next.js

Question 1

What does React render to create web pages?

Answer 1

JSX and TSX code. Next.js provides another way to do this.

Question 2

What are some key benefits of Next.js over React?

Answer 2

Improved initial page load performance, SEO, and user experience on slow devices/networks.

Question 3

What are the two rendering methods for JSX/TSX code?

Answer 3

Client Side Rendering (CSR) and Server Side Rendering (SSR).

Question 4

How does Client Side Rendering (CSR) work?

Answer 4

JSX/TSX is compiled to JavaScript and sent to the browser, which renders the webpage by manipulating the DOM.

Question 5

How does Server Side Rendering (SSR) work?

Answer 5

JSX/TSX is rendered to HTML on the server and sent to the browser with minimal JavaScript for reactivity.

Question 6

Which rendering methods does React support?

Answer 6

Only Client Side Rendering (CSR).

Question 7

Which rendering methods does Next.js support?

Answer 7

Both CSR and SSR. By default it performs SSR.

Question 8

What is a major drawback of CSR?

Answer 8

Slow initial page load due to downloading and executing a large JavaScript bundle.

Question 9

What is a major benefit of SSR?

Answer 9

Faster initial loading as the browser receives pre-rendered HTML.

Question 10

What is hydration in Next.js?

Answer 10

The process of running JavaScript on the HTML received from SSR to make the page interactive.

Question 11

How do you specify a component to use CSR in Next.js?

Answer 11

Add ‘use client’ at the top of the component file.

Question 12

How has the role of React changed with the emergence of Next.js?

Answer 12

React is often used within frameworks like Next.js instead of standalone.

React is a library that lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js

Question 13

What command creates a new Next.js project?

Answer 13

Use the terminal and run: npx create-next-app@latest

Question 14

What does routing mean in Next.js?

Answer 14

Handling a client’s request based on its URL.

Question 15

What are the two routers in Next.js?

Answer 15

Pages Router and App Router.

Question 16

Which Next.js router supports React’s latest features?

Answer 16

The App Router.

Question 17

How do you containerise a Next.js project?

Answer 17

Add Dockerfile and .dockerignore, then use docker build and docker run commands.

Question 18

What is the RootLayout component responsible for?

Answer 18

Formatting common to every page, like buttons and banners.

Question 19

What does the Home component define?

Answer 19

The specific content for the route, using CSR.

Question 20

Where do you define routes using the App Router?

Answer 20

In the app directory using folders and files.
A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final leaf folder that includes a page.js file.

Question 21

What is a URL segment?

what is a URL path?

Answer 21

Part of a URL path delimited by slashes. Each folder in the nested hierarchy represents a route segment

Part of the URL that comes after the domain (composed of segments).

Question 22

How do you create a nested route like /dashboard/settings?

Answer 22

You build a directory structure inside the app directory that mimics the route structure you want to be able to visit.

Nest folders: app/dashboard/settings/page.js.

Question 23

How do you define a dynamic route segment in Next.js?

Answer 23

You use dynamic segments, that are filled in at request time or pre rendered at build time.

Use square brackets in folder names [folderName], e.g., [id] or [slug].

Question 24

How are dynamic segment values accessed?,

Answer 24

They are passed as the params prop to layout/page functions.

Question 25

Give an example of a dynamic route for a blog post.

Answer 25

app/blog/[slug]/page.js

Question 26

What is the purpose of the layout file in Next.js?

Answer 26

Shared UI for a segment and its children

Question 27

What does the page file define in Next.js?

Answer 27

The unique UI of a route; makes the route publicly accessible

Question 28

What does the loading file do in Next.js?

Answer 28

Provides a loading UI for a segment and its children

Question 29

What is the use of the not-found file?

Answer 29

Defines the "not found" UI for a segment and its children

Question 30

What does the error file handle?

Answer 30

Displays UI for errors in a segment and its children (React error boundary)

Question 31

What does the global-error file handle?

Answer 31

Displays global error UI

Question 32

What is the purpose of the route file?

Answer 32

Creates a server-side API endpoint

Question 33

What is the function of the template file?

Answer 33

Specialised re-rendered Layout UI

Question 34

What is the default file used for?

Answer 34

Fallback UI for Parallel Routes

Question 35

Which file extensions can be used for special files in Next.js?

Answer 35

.js, .jsx, or .tsx

Question 36

What is the rendering order of special files?

Answer 36

layout > template > error > loading > not-found > page/nested layout

Question 37

What happens in a nested route?

Answer 37

Child components are nested inside parent segment components

Question 38

What is colocation in Next.js?

Answer 38

Storing related files (e.g. components, styles) within app folders

Question 39

Are non-special files like button.js routable?

Answer 39

No, only page.js or route.js make folders routable

Question 40

What are Parallel Routes?

Answer 40

Show multiple pages in the same view with independent navigation

Question 41

What are Intercepting Routes?

Answer 41

Show one route in the context of another (e.g. task detail in task list)

Question 42

What are Route Handlers in Next.js?

Answer 42

Custom API endpoints using web standard APIs

Question 43

What HTTP methods are supported by Route Handlers?

Answer 43

GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS

Question 44

What does force-dynamic do?

Answer 44

Forces dynamic rendering for each user request

Question 45

Can route.js exist at the same level as page.js?

Answer 45

Route Handlers can be nested inside the app directory, like page.js and layout.js but there cannot be a route.js file at the same route segment level as page.js as the app.router won’t know if you want to serve that route as a web page or an API endpoint.

Question 46

How is caching handled by default for GET in Route Handlers?

Answer 46

Next.js caches the result of the GET request

Question 47

How to opt out of caching in GET requests?

Answer 47

Use the Request object with GET, or use other HTTP methods, or dynamic functions

Question 48

What is the fetch function in JavaScript?

Answer 48

Fetches data via HTTP and returns a Promise

Question 49

What is a promise and what are the states of a Promise?

Answer 49

A promise is a javascript object that returns immediately, telling the CPU that it's working on it/has status pending and it will soon return the promised data or a failed status. Pending, Fulfilled, Rejected

Question 50

What does await do in JavaScript? Where must await be used?

Answer 50

Pauses execution until a Promise is resolved. Inside an async function

Question 51

What do the Promise methods .then() and .catch() do?

Answer 51

.then() to handle successful outcomes and .catch() to handle errors - This allows you to chain asynchronous operations and manage errors more cleanly than traditional methods.

Question 52

How does async function behave?

Answer 52

Non-blocking (await suspends the execution of an async function) and always returns a Promise

Question 53

What does the fetch API allow in POST requests?

Answer 53

Sending data to a server using headers and a JSON body

Question 54

Name 4 ways to fetch data in Next.js

Answer 54

Server with fetch, server with 3rd-party libraries, client via Route Handler, client with 3rd-party libraries

Question 55

What is Data Caching in Next.js?

Answer 55

Storing data so it doesn’t need to be fetched every time

Question 56

When is fetch not cached?

Answer 56

Inside POST Route Handlers, Server Actions, after headers/cookies

Question 57

What is force-cache?

Answer 57

The default caching mode in fetch

Question 58

What is the Data Cache in Next.js?

Answer 58

Persistent HTTP cache shared across regions

Question 59

What is Revalidation?

Answer 59

purging the Data Cache and re-fetching the latest data

Question 60

What are two types of revalidation?

Answer 60

Time-based and On-demand

Question 61

How to set time-based revalidation?

Answer 61

Automatically re-validate data after a certain amount of time has passed Use next: { revalidate: } in fetch command

Question 62

How to do on-demand revalidation

Answer 62

Manually re-validate data based on an event Use revalidatePath or revalidateTag in Server Actions or Route Handlers

Question 63

What happens if revalidation fails?

Answer 63

The last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data.

Question 64

How to disable caching for a fetch request?

Answer 64

Use cache: 'no-store'

Question 65

What is the recommended way to control caching?

Answer 65

Configure each fetch request individually for granularity