Reasons to use Next.js instead of create-react-app in your next project
Tags: react, javascript, news, discuss
Published: 2020-11-17 06:43:16

React is a wonderful framework, isn't it?
I have been a react developer for some time now and I love it.
But recently I came across [Next.js](https://nextjs.org/), which is built on top of [React](https://reactjs.org/) and it is definitely an improvement over the latter.

# So what is Next.Js?

NextJS is a [open-source](https://github.com/vercel/next.js/) framework for building React applications. It comes with server-side rendering, static-site generation, serverless functions, SEO support and so so much more, that too out of the box. Yay!

### How is server-side rendering faster than client-side rendering?
In server-side rendering the contents of the webpage, be it HTML, CSS or Javascript are generated on the server, and the whole HTML page is downloaded and displayed. So, all the pre-processing, calculations, and any complex communication with the server are handled in the server itself whereas, in client-side rendering, everything is processed at clientside

# Advantages of NextJs over React

1. **It's super fast**
With the help of Server-side rendering and static-site generation loads the site blazing fast.

2. **It's SEO friendly.**
Server-side rendering fuels our goals to achieve levels of SEO, UX, performance, etc. Moreover, you can customize your own `<meta>` tags to improve your Search Engine Optimisation to your liking by importing Head from `"next/head"` and these meta tags will be appended to your page so that search engines could crawl swiftly. How cool is that!

3. **Wide features out of the box**
Minifying javascript, doing code splitting, lazy loading, prefetching assets, render the minimal amount of HTML, caching builds, all performance optimization comes out of the box, in nextJs so your primary focus remains the development of your project.

# How to get started?
> [NextJs Docs](https://nextjs.org/docs/getting-started)

### 1. Pre-requisites
* [ReactJS](https://github.com/facebook/react) knowledge is **must**.
* [NodeJS](https://nodejs.org/en/download/) or [Yarn](https://classic.yarnpkg.com/en/docs/install) should be installed.

### 2. Creating a project
NextJS recommends creating a new Next.js app using `create-next-app`, which sets up everything automatically for you. To create a project, run in the terminal after navigating to the desired directory:
```
npx create-next-app
# or
yarn create next-app
```

Here's a [Codesandbox example](https://codesandbox.io/s/create-next-app-example-nlxbb?from-embed=&file=/pages/index.js) of what you'll get:

{% codesandbox nlxbb %}

# Resources
>  In case you don't know ReactJS, I suggest you learn that first. There's plenty of resources available online, I will mention some of them down here.

### ReactJs resources.
* [ReactJS Official Documentation](https://reactjs.org/docs/getting-started.html)
* [ReactJS YouTube crash course](https://youtu.be/Ke90Tje7VS0)

### NextJS resources 
* [NextJs Docs](https://nextjs.org/docs/getting-started) is great place to start.
* This [YouTube course](https://youtu.be/tt3PUvhOVzo) will get you started from ground up.



### Thank you for reading this far
Subscribe to my [Newsletter](https://sarveshh.beehiiv.com/) for exciting posts just like this.

{% embed https://sarveshh.beehiiv.com/subscribe %}