NextJS

Question 1

What is Next.js?

Answer 1

A React framework that …

• handles the tooling and configuration needed for React,
• provides additional structure, features and optimizations for your application

Question 2

What are 5 differences between React and Next.js?

Answer 2

1. Next.js has its own compiler
2. Fast Refresh comes pre-configured with Next.js
3. JS and CSS files are automatically minified in Next.js
4. Next.js has built-in support for code-splitting
5. Pages in Next.js can be rendered client-side, server-side or with static site generation

Question 3

What enables routing in Next.js?

Answer 3

Files added to the ‘pages’ folder will automatically be rendered with the matching url.

Question 4

What element should be used for internal links?

Answer 4

the Link element
———————————————————————————————-

import Link from ‘next/link’;
Example

Question 5

What element should be used for external links?

Answer 5

The anchor element (<a></a>)

Question 6

How/where should attributes like ‘className’ be added to links?

Answer 6

Inside the anchor tag, which is wrapped inside Next’ Link element
———————————————————————————————-

import Link from ‘next/link’;

<a>link</a>

Question 7

How can metadata such as be modified?

Answer 7

By importing and using Next’ element

Question 8

How can the element be customized in Next.js?

Answer 8

By creating a ‘_document.js’ page inside the ‘pages’ folder (/pages/_document.js)

Question 9

What is the advantage of the Next.js element vs the HTML element?

Answer 9

It optimizes when additional scripts are fetched and executed.

Question 10

What additional properties does the element have?

Answer 10

1. strategy - controls when the third-party script should load (e.g. ‘lazyOnload’)
2. onLoad - runs javaScript code right after the script has finished loading

Question 11

What styling methods does ext.js have built-in support for?

Answer 11

1. CSS modules
2. Sass
3. PostCSS libraries like Tailwind Css
4. CSS-in-JS libraries like styled-jsx

Question 12

How can global styles be loaded?

Answer 12

By importing the styles into the ‘pages/_app.js’ file (cannot be imported in other files).

Question 13

What function is used for static generation with data?

Answer 13

getStaticProps()
———————————————————————————————-

export async function getStaticProps() {

  // get external data  
  const data = ... 

  // return props to pass to the component
  return { props: ... }

}