loading...
Cover image for Reasons to use Next.js instead of create-react-app in your next project?

Reasons to use Next.js instead of create-react-app in your next project?

sarveshh profile image Sarvesh Patil ใƒปUpdated on ใƒป2 min read

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, which is built on top of React and it is definitely an improvement over the latter.

So what is Next.Js?

NextJS is a open-source 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

1. Pre-requisites

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
Enter fullscreen mode Exit fullscreen mode

Here's a Codesandbox example of what you'll get:

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.

NextJS resources

Thank you for reading this far.

Follow me on Github for exciting upcoming projects.

GitHub logo sarveshh / sarveshh

Welcome to my GitHub. I'm sure you'll find something interesting here.

๐Ÿ‘‹

Hero image

A passionate Full Stack developer from India ๐Ÿ‡ฎ๐Ÿ‡ณ

Connect with me:

sarveshh sarveshh sarveshp273 sarvastic_af sarveshh sarveshh sarvastic_af

sarveshh


โ€ƒย Languages and Tools I like to work with

Programming Languages:-
javascript โ€ƒ python

FrontEnd Development
react โ€ƒ redux โ€ƒ sass โ€ƒ bootstrap โ€ƒ gulp โ€ƒ angularjs โ€ƒ html5 โ€ƒ css3

Backend Development
express โ€ƒ nodejs โ€ƒ graphql

Mobile App Development
flutter โ€ƒ reactnative โ€ƒ ionic

Database
mongodb โ€ƒ realm โ€ƒ mysql

Data Visualisation
d3js โ€ƒ canvasjs

Backend as a Service (BaaS)
firebase โ€ƒ heroku

Framework
django โ€ƒ flask

Testing
cypress โ€ƒ selenium

Softwares
blender โ€ƒ illustrator โ€ƒ photoshop โ€ƒโ€ƒ xd โ€ƒ postman

AI/ML
scikit_learn โ€ƒ opencv โ€ƒ tensorflow

Others
git


What am I up to?

  • ๐Ÿ”ญ Iโ€™m currently working on Handwriter
  • ๐ŸŒฑ Iโ€™m currently learning three.js, GSAP and passport.js
  • ๐Ÿ‘จโ€๐Ÿ’ป All of my projects are available on GitHub
  • ๐Ÿ“ I regulary write articles on dev.to
  • ๐Ÿ’ฌ Ask me about Javascript, Python, React, MongoDB, Firebase
  • โšก Fun fact I transform coffee to code

Stats and Reach:

ย  sarveshh

sarveshh

ย sarveshh

Blog posts

Discussion

pic
Editor guide
Collapse
tehaisperlis profile image
Hazmi Irfan

Sorry but I don't really understand your title. React is a view library instead of a framework. Also, Nextjs is a React framework and if you are using Nextjs you are using React.

Collapse
sarveshh profile image
Sarvesh Patil Author

Point Noted. My title was a little vague. What

jreinhold image
took out of it is factually correct.
Collapse
jreinhold profile image
Jeppe Reinhold

Yeah, I think maybe what you're trying to convey, is using Next.js instead of Create-React-App?