Next.js Introduction - GeeksforGeeks

03 Nov, 2021
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
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-domAfter 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.
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>        )    }  }
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:
Output:
Reference: https://nextjs.org/docs/getting-started
Next.js
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data from one component to other component in ReactJS ?
ReactJS useNavigate() Hook
ReactJS defaultProps
How to set background images in ReactJS ?
Re-rendering Components in ReactJS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript