DEV Community

loading...
Cover image for Introduction to NextJS

Introduction to NextJS

olenadrugalya profile image Olena Drugalya ・2 min read

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

Discussion (16)

Collapse
icecoffee profile image
atulit023

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

Collapse
olenadrugalya profile image
Olena Drugalya Author

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
nefomemes profile image
Collapse
icecoffee profile image
atulit023

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
nefomemes profile image
Nefomemes • 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
ivanjeremic profile image
Ivan Jeremic

Learn Nextjs

Collapse
icecoffee profile image
atulit023

Yessir 😀

Collapse
icecoffee profile image
atulit023

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
Kubdev

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 Author

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

Forem Open with the Forem app