NextJS Basics

Question 1

What is Nextjs

Answer 1

Next js is a lightweight react js framework for static and server-rendered applications

Question 2

What are the main features of Next js?

Answer 2

Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)
Webpack-based dev environmet which supports Hot Module Replacement (HMR)
Able to implement with Express or any other Node.js HTTP server
Customizable with your own Babel and Webpack configurations

Question 3

How to create pages in next.js?

Answer 3

Pages folder contains all pages and routes are defined this way

Question 4

How do I fetch data in Next.js?

Answer 4

It’s depends. but next.js recommends getInitialProps is an async function and it can be used to retrieve data from anywhere.

getInitialProps receives a context object with has the following properties:

pathname - path section of URL
query - query string section of URL parsed as an object
asPath - String of the actual path (including the query) shows in the browser
req - HTTP request object (server only)
res - HTTP response object (server only)
err - Error object if any error is encountered during the rendering

Question 5

what is getInitialProps ?

Answer 5

getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server. This is especially useful for SEO.

getInitialProps is used to asynchronously fetch some data, which then populates props.

returned object from getInitialProps is a plain Object

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router. However, if getInitialProps is used in a custom _app.js, and the page being navigated to implements getServerSideProps, then getInitialProps will run on the server.

gIP cannot be used in children components, only the default export of every page.

Question 6

what is the context object of getInitialProps

Answer 6

receives a single argument called context, it’s an object with the following properties:

pathname - Current route. That is the path of the page in /pages
query - Query string section of URL parsed as an object
asPath - String of the actual path (including the query) shown in the browser
req - HTTP request object (server only)
res - HTTP response object (server only)
err - Error object if any error is encountered during the rendering

Question 7

getStaticProps

Answer 7

fetch data and populate at build time. (static gen)

use if the page is available at build time ahead of a user’s request, if data comes from headless CMS, data can be publicly cached, or page must be pre-rendered for SEO.

If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

export async function getStaticProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}

Question 8

getServerSideProps

Answer 8

Fetch data on each request. (SSR)

If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

Question 9

getStaticPaths

Answer 9

Specify dynamic routes to pre-render based on data. (static gen)

You should use getStaticPaths if you’re statically pre-rendering pages that use dynamic routes.

If a page has dynamic routes (documentation) and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time.

object returned must have a fallback key, boolean, which if false returns a 404 to any paths not returned by 404. If we have a small number of paths to pre-render, we do this.