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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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>
            )
        }  
    }

    chevron_right

    
    

  • Step 4: Now start the application by running npm start.

    Output:

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

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

5


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.