Next.js Interview Questions
Q:- What is Next Js?

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

Q:- Why Next.js?
  1. Zero Setup:

    Automatic code splitting, filesystem based routing, hot code reloading and universal rendering

  2. Fully Extensible:

    Complete control over Babel and Webpack. Customizable server, routing and next-plugins.

  3. Ready for Production

    Optimized for a smaller build size, faster dev compilation and dozens of other improvements.

Q:- How to install Next js?
Install:
npm install --save next react react-dom

and add a script to your package.json like this:

{ "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.

You may also like - React.js Interview Questions
Q:- What are the main features of Next js?
  1. Server-rendered by default
  2. Automatic code splitting for faster page loads
  3. Simple client-side routing (page based)
  4. Webpack-based dev environmet which supports Hot Module Replacement (HMR)
  5. Able to implement with Express or any other Node.js HTTP server
  6. Customizable with your own Babel and Webpack configurations
Q:- What are the use of Next js?

Next js is most popular framework for building:

  1. Server Rendered App
  2. Progressive Web Apps (PWA)
  3. Static Website
  4. SEO friendly Websites
  5. Desktop Website
You may also like - Redux Interview Questions
Q:- How to create pages in next.js?

You can create page your page inside pages folder.

Q:- How to create custom error page in next.js?

You can create page your custom error page by defining a _error.js in the pages folder.

import React from "react"; class Error extends React.Component { static getInitialProps({ res, err }) { const statusCode = res ? res.statusCode : err ? err.statusCode : null; return { statusCode }; } render() { return (
{this.props.statusCode ? `An error ${this.props.statusCode} has occurred on the server` : "An error occurred on client-side"}
); } } export default Error;
Q:- Can I use it with Redux?

Yes

Q:- How do I fetch data in Next.js?

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
You may also like - Node.js Interview Questions