# Next.js — The React Framework for Production(Intro)

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055182217/747a8033-1de9-4e84-ac5f-6d6ffadb3515.gif align="left")

### What will you learn?

1. Intro about Next.js
    
2. How Next.js is different from React
    
3. Settingup new Next.js application
    

### 1\. Intro about Next.js

Next.js is an opinionated React framework that enables several extra features, including server-side rendering, and generating static websites.

[React](https://reactjs.org/) is a JavaScript library that is traditionally used to build web applications rendered in the client’s browser with JavaScript.

The main idea behind the framework(Next.js) is to ensure applications start and remain as performant as possible by having these capabilities included by default.

#### Development history of Next.js

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055184234/44450608-c668-4be2-9ba7-4839bd09967e.png align="left")

Image represents the development history of Next.js

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055186897/034bb84c-a88a-4892-91a5-ecd66564dcfd.png align="left")

### 2\. How Next.js is different from React

React is a library that makes it easier to build user interfaces using a component-based approach. Although powerful, React is specifically a UI library. Many developers include additional tooling such as a module bundler (webpack for example) and a transpiler (Babel for example) to have a complete build toolchain.

In the React collection, we took the approach of using [Create React App](https://create-react-app.dev/) (CRA) to spin up React apps quickly. CRA takes the hassle out of setting up a React application by providing a complete build toolchain with a single command.

Next.js, which can also be used to create a new React application, takes a different approach. It immediately provides a number of common optimizations that many developers would like to have but find difficult to set up, such as:

* Server-side rendering
    
* Automatic code-splitting
    
* Route prefetching
    
* File-system routing
    
* CSS-in-JS styling (`[styled-jsx](https://github.com/zeit/styled-jsx)`)
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055188579/309a481f-8e28-4642-af41-0b4c0bcde428.png align="left")

### 3\. Settingup new Next.js application

To create a new Next.js application, run the following command:

npx create-next-app new-app

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055190482/6ad4e894-c346-44a5-92bc-78b47a85dce1.png align="left")

Once the installation is done navigate to the directory and start the development server using the below command

`cd new-app   npm run dev`

Notice that a **pages/** directory is created with a single file: **index.jsx**. Next.js follows a file-system routing approach, where every page within this directory is served as a separate route. Creating a new file in this directory, such as **about.js**, will automatically create a new route (**/about**).

Components can also be created and used like any other React application. A **components/** directory has already been created with a single component, nav.js, which is already imported in index.js. By default, every import used in Next.js is only fetched when that page is loaded, providing the benefits of automated code-splitting.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055192937/81217549-3cbd-4666-8cc3-a4822ddf49e1.png align="left")

The preview of Next.js directory with the newly created files

Moreover, every initial page load in Next.js is server-side rendered. If you open the Network panel in DevTools, you can see the initial request for the document returns a fully server-rendered page.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055195699/705f88eb-3414-4713-9d3d-3518971c9474.png align="left")

*The Preview tab of the Network panel shows that Next.js returns visually complete HTML*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055197454/0c0e75a9-484f-484a-9e69-2de6a65003d8.png align="left")

### Congratulations!

Today we have seen about the introduction about Next.js frameworks and how it differs from ReactJS by creating a simple application.

Will Catch you up in a new post till then Happy Learning:)