Explore topic-wise InterviewSolutions in .

Yes, Next JS 5 and above supports static CDN. With the introduction of assetPrefix, Next.JS AUTOMATICALLY LOADS assets from CDN.

Implementing Serverless mode excellently improves SCALABILITY and readability of an application by SPLITTING it into smaller parts known as LAMBDAS. It also promotes affordability with a "PAY for what you use" model.

To enable Serverless mode in Next JS, we have to add ‘serverless’ BUILD target in next.config.js.

// next.config.js

module.exports = {

target: 'serverless'

}

It’s a CSS-in-JS library USED by DEVELOPERS to write scoped and encapsulated CSS to style Next JS COMPONENTS. The styles introduced to one component with Styled JSX will not AFFECT other components, allowing developers to add, delete, and change styles without WORRYING about any side effects.

This one is crucial. Next JS interview question to practice and remember all its aspects. There are two processes to enable AMP in Next JS. The thing to remember here is, AMP is a crucial part of many Next JS interview QUESTIONS, so we would advise it to practice well.

• AMP-First Pages

           These are served to the primary traffic of the website as well as traffic generated from the search engine. We have to use the following syntax to implement AMP-first pages.

• Hybrid AMP Pages

           Hybrid AMP pages allow users to have a coexist AMP version of a traditional page so that search engines can easily display the AMP version or the page in DIFFERENT mobile search results. To               implement Hybrid AMP to pages, we have to use the following syntax.

<

AMP-First Pages :-

// pages/index.js

IMPORT { withAmp } from 'next/amp'

function HomePage() {

return <p> Welcome to AMP + Next.js.</p>

}

export DEFAULT withAmp(HomePage)

Hybrid AMP Pages :-

// pages/index.js

function HomePage() {

return <p> Welcome to AMP + Next.js.</p>

}

export default withAmp(HomePage, { hybrid: true })

To VALIDATE your AMP pages, ‘amphtml-validator’ is USED during the development. Warnings and fatal errors will be displayed in the TERMINAL where the Next JS is started. AMP pages also get VALIDATED during ‘next export’ and issues will be printed in the terminal, and the ‘next export’ will fail DUE to the absence of proper AMP validation.

This is a Next JS standard used to build high-performance WEBSITES rendering overhead. AMP implemented websites are INDEXED faster in modern and POPULAR search engines with enhanced promoting behavior. AMP web pages are LOADED directly to Google's MOBILE search results with a lightning icon, better performance, fewer restrictions, and better scalability.

We have to use the further mentioned SYNTAX configuration to write inline CSS in Next JS.

function HiThere() {

  RETURN <p STYLE={{ color: 'red' }}>HI there</p>;

  }

export default HiThere;

To configure a STATIC ID between our builds, we have to provide “generateBuildId” function with this given configuration.

// next.config.js

module.exports = {

   generateBuildId: ASYNC () =&GT; {

  // For example get the latest git COMMIT hash here

  return 'my-build-id';

  }

};

Developers have to follow these steps to setup CDN in Next JS.

• To start, we have to first set up the “assetPrefix” SETTING and configure our CDN origin to support resolve to the DOMAIN that our Next JS is hosted on.

            const isProd = process.env.NODE_ENV === 'production';

            module.exports = {

               // You may only need to add assetPrefix in the production.

         assetPrefix: isProd ? 'https://cdn.mydomain.com' : ''

};

• For a CDN present on a separate domain that you may like assets to be requested with use of CORS aware REQUEST, we have to set a configuration option as FOLLOWING.

         // next.config.js

         module.exports = {

           crossOrigin: 'anonymous'

};

6. How to create a custom error page in next js?

• To create a custom error page in Next JS, we have to define a “_error.js” in the page folder with this given syntax.
• We have to import our own “_ error” component INSTEAD of “next/error” further to use our custom error page.

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 (

<p>

   {this.props.statusCode

   ? `An error ${this.props.statusCode} occurred on server`

   : 'An error occurred on client'}

</p>

    );

  }

}

export default Error;

To disable etag GENERATION in Next JS, we have to use the app.disable('etag') syntax. But, this may not work for all STATIC contents. The below mentioned syntax will disable etag for all static contents.

app.use(express.static(path.join(__dirname, 'public'), {

etag: false

}));

Here is a LIST of most developer-exciting Next JS FEATURES:

• Default and EASY server rendering
• Static exporting
• Hot code reloading
• Automatic code splitting
• Complete Webpack and Babel control
• Filesystem based routing
• Faster and OPTIMIZED development compilation

• Create a directory to keep the Next JS project and go into it:
  MKDIR my-portfolio-site
  cd my-portfolio-site
• Now initialize this with a package.json file.
• Use the y flag by npm init –y
• Use the below-mentioned syntax to install Next JS
  npm install react react-dom next
• Update package.json with run SCRIPT languages to start the initialization of Next JS application.
• Please FIND the package.json file on root folder and add the below mentioned script
  "dev": "next",
  "build": "next build",
  "start": "next start"

Now, we are finished with the process.

Next, JS is an open-source, JavaScript FRAMEWORK that lets developers build static and server-side RENDERING web applications. Created by Zeit, Next JS doesn’t require any WEBPACK configuration and only needs npm run DEV start building your next feature filled web application.