DEV Community

Cover image for Introduction to NextJS
Olena Drugalya
Olena Drugalya

Posted on

Introduction to NextJS

This blog post is an easy introduction to NextJS and it's features.
However, before starting to read this blog post, you must be familiar with React library.

What is NextJS?

NextJS is a React framework, which means is a platform for developing software applications by using React library.
It has a lot of features which make development of React applications easier.

As a programmer, we don’t need to start from scratch when there are already tools designed to help us with our projects. Frameworks are software that is developed and used by developers to build applications, so NextJS is one of them.

Why to Use NextJS?

This question appeared in my head many times before I wasn't familiar with NextJS. I was pretty sure that React library itself is enough to build an application. But as I was developing my web developer's skills and started to build highly-scaled large applications, I had to import many additional libraries together with React (for example, for routing).

NextJS makes the development of large React application easier, since it provides many additional features, which we will discuss below in details. This framework solves many common problems and simply makes the life of React developer easier :) We still write React code and use React features, but also together with that we are provided by lots of built-in features to solve common problems and clear instructions how to use them.

Key Features of NextJS

NextJS offers many benefits for the React developers:

  • page-based routing system (with support for dynamic routes)
    With NextJS we don't need to care about writing a code for routers for the pages, we just create a page in a special folder and NextJS provides it with routing, simple as that :)

  • pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported
    Server-side rendering (SSR) is preparing of content of a page on a server, while one-page React application uses client-side rendering (CSR). The problem with CSR is that it's not actually SEO friendly, because search engines will not see the actual content of the page. By using SSR in NextJS we can avoid such issues as flickering page while data fetching and our website content will be SEO friendly.

  • built-in CSS and Sass support, and support for any CSS-in-JS library

  • development environment with Fast Refresh support

  • full-stack capabilities
    NextJS makes it easier for React developers to add back-end code to the project. It very easy here to add our own code for storing data, getting data, authentication etc.

With all that being said, I highly recommend you to consider using this framework and if you have already decided to learn it - congratulations, you made a good choice :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

Top comments (16)

Collapse
 
icecoffee profile image
Atulit Anand

I like it!
But this led me to a question too,
Is nextjs better then create-react-app?

Collapse
 
olenadrugalya profile image
Olena Drugalya

It really depends on the project. I have used CRA during my study, but it’s not used for large projects. NextJS is way more better - it includes already everything you need plus search engine crowlers can easily search for data

Collapse
 
natalia_asteria profile image
Natalia Asteria • Edited

Obviously it is

Collapse
 
icecoffee profile image
Atulit Anand

I meant like create react app + react router + flux or redux = better solution then next js
Because of client side routing and flux can handle data easily

Thread Thread
 
natalia_asteria profile image
Natalia Asteria • Edited

You can use those in Nextjs. Also Nextjs have client-side rendering on top of SSR, which is how it's done by default in Nuxtjs.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Learn Nextjs

Collapse
 
icecoffee profile image
Atulit Anand

Yessir 😀

Collapse
 
icecoffee profile image
Atulit Anand

Guess I'm learning nextjs next lol.
I thought express was better like with cra maybe express is not production ready.

Collapse
 
dskaiser82 profile image
Daniel Kaiser • Edited

Wanted to challenge one part of this :" CSR is that it's not actually SEO friendly, because search engines will not see the actual content of the page. "

I built a SPA (CSR) app at my last job from scratch using Vue + Vue Router + Apache back-end (not my choice). At first Apache complained about the routes saying they didn't exist. And Google's page rankings didn't like this.

The solve:

  • Use Google Search Console search.google.com/
  • Keep the site map updated and upload it to Search Console
  • Once we fixed the apache 404 errors, update Search Console with all the routes

One google knew the SPA routes existed, the idea that Google's spiders can't read the pages because they are JS and virtual DOM is completely false. The Spiders did read the Vue/Vue Router pages, and our SEO rankings was in the 85-90 area

Collapse
 
mkubdev profile image
Maxime Kubik

I'm currently using angular and nestjs at office because i like typescript a lot.
But NextJS give so much interest...

Collapse
 
salarc123 profile image
SalarC123

I know this is completely unrelated, but how much money have you made from donations to your tip jar?

Collapse
 
olenadrugalya profile image
Olena Drugalya

Not much :) it’s not my main source of income of course

Collapse
 
tompradat profile image
TomPradat

Great introduction, I'll make sure to give Next.js a try :)

I have a question about it, what do you think are the tradeoffs of using a NodeJS backend + a SPA vs using Next.js (excluding the SEO part) ?

Collapse
 
agilitycms_76 profile image
Agility CMS

Great article! If you guys want to try Next.js, here is a free next,js blog starter with automated deployment to Vercel agilitycms.com/starters/blog-with-...

Collapse
 
agilitycms_76 profile image
Agility CMS

we wrote on our blog too "What is Next.js", but i like he short and sweet your post is :) agilitycms.com/resources/posts/wha...
I might want to quote you! :)

Collapse
 
dobal19 profile image
SACHIN DOBAL

already started