Next.js

Question 1

In Next.js, what is a page?

Answer 1

In Next.js, a page is a React Component exported from a file in the pages directory.

Question 2

What does the Link component enable in Next.js ?

Answer 2

The Link component enables client-side navigation between two pages in the same Next.js app.

Question 3

What is client side navigation?

Answer 3

Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.

Question 4

Next.js does code splitting automatically, what does this mean?

Answer 4

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

Question 5

How do you link to an external page outside the Next.js app?

Answer 5

If you need to link to an external page outside the Next.js app, just use an <a> tag without Link.</a>

Question 6

What is cumulative layout shift? How is this related to Next.js?

Answer 6

It is a core web vital that google uses in search ranking.

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Next.js has an image component that optimizes images. It loads the image in a way that avoids any layout shift.

Question 7

What is hydration?

Answer 7

Hydration is when a prerendered HTML page receives the JavaScript to make it fully functional. The HTML page initially loads with very little JavaScript.

From the Next.js starting guide
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

Question 8

What is pre rendering in Next.js ?

Answer 8

This is when a pre-rendered HTML page is loaded first and then the JavaScript (React code) that makes it functional is loaded after. This gives the page load the appearance of being very fast.

Question 9

Next.js has two forms of pre-rendering, what are they?

Answer 9

Static Generation and Server-side Rendering.

Question 10

What is Static Generation?

Answer 10

Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.

Question 11

What is Server-side rendering?

Answer 11

Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Question 12

When deciding whether you should use static generation what question should you ask yourself?

Answer 12

You should ask yourself: “Can I pre-render this page ahead of a user’s request?” If the answer is yes, then you should choose Static Generation.

Question 13

When is static generation not a good idea?

Answer 13

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.

Question 14

What is static generation with data?

Answer 14

This is when a static HTML page is generated but some data that goes into it is retrieved before it is generated .

Question 15

How do you use static generation with data?

Answer 15

when you export a page component, you can also export an async function called getStaticProps. If you do this, then:

getStaticProps runs at build time in production, and…
Inside the function, you can fetch external data and send it as props to the page.

Question 16

Where does getStaticProps run?

Answer 16

Server side

Question 17

How do you use server side rendering in Next.js ?

Answer 17

You need to export getServerSideProps from your page.

Question 18

What three things does a page file need to contain to statically generate pages with dynamic routes? Assume the path is /posts/<id></id>

Answer 18

The page file must contain…

1. A React component to render this page.
2. getStaticPaths which returns an array of possible values for id.
3. getStaticProps which fetches necessary data for the post with id.

Question 19

When does getStaticPaths run in both development and production?

Answer 19

In development (npm run dev or yarn dev), getStaticPaths runs on every request.
In production, getStaticPaths runs at build time.

Question 20

Does the _document.js file get rendered client side?

Answer 20

No, Next.js is configured in a way that this _document.js file is only being rendered on the server.

Question 21

Next.js has support for API Routes, what does this let you create?

Answer 21

It lets you easily create an API endpoint as a Node.js serverless function.

Question 22

Can getStaticProps and getStaticPaths run on the server-side?

Answer 22

yes BUT getStaticProps and getStaticPaths run ONLY on the server-side and will never run on the client-side.