Next.js Introduction

Next.js is a react based framework. It has powers to Develop beautiful Web application for different platform like Windows, Linux and mac. If you have little experience in react and looking forward to know more about react ecosystem then you should have knowledge about Next.js framework.
Let’s have a brief introduction about Next.js.

Introduction: Next.js is based on react, webpack and babel. It is an awesome tool for creating web application and famous for server-side rendering. Next.js is build by Zeit. Developers with knowledge of HTML, CSS, Java Script and React can easily learn and switch to next.js.

Main Features:

• Hot Code Reloading: It automatically reloads the application when changes in the code get saved.
• Automatic Code Splitting: By this feature, every import in the code get bundled and served with each page. It means that unnecessary code never get loaded on the page.
• Ecosystem Compatibility: Compatible with JavaScript, Node and react.
• Server Rendering: Easily render react component on server before sending HTML to client.
• Styled-JSX: Styled-JSX allows you to write CSS directly inside JavaScript code.

Example:

function Home() {
    return (
        <div className="container">
        <p>Hello Geeks</p>
        <style jsx>{`
            .container {
                margin: 50px;
            }
            p {
                color: blue;
            }
        `}</style>
        </div>
    )
}

export default Home

Steps to Install and Run Next.js Application:

• Step 1: Installation of next.js require npm and node.js. You can install node.js from here. Confirm the installation by running these command on terminal.

  node -v
  npm -v

• Step 2: Now create a folder for your project on desktop navigate to folder through your code editor and run the following command on terminal.

  npm init -y
  npm install --save next react react-dom

  After this step, we have all the dependencies installed in our system. Now add the following script in package.json file

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

  To run the application in the browser use the command npm start in terminal.

• Step 3: Add a file index.js in page folder and add the following code inside it.

  import React from'react';
  import Link from'next/link';
  
  export default class extends React.Component {
      render() {
          return ( {
  
          // This is Jsx contains HTML
          // code in Javascript}
          <div>
              <h1>Hello Geeks</h1>
              {
                  // This is Styled-jsx contains
                  // CSS code in Javascript}
                  <style jsx>{`
                      a{
                          color:grey;
                          text-decoration:none;
                      }
                  `}</style>
              }
          </div>
          )
      }
  }
• Step 4: Now start the application by running npm start.
  

  Output:
  

Reference: https://nextjs.org/docs/getting-started