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 :)
Top comments (16)
I like it!
But this led me to a question too,
Is nextjs better then create-react-app?
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
Obviously it is
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
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.
Learn Nextjs
Yessir 😀
Guess I'm learning nextjs next lol.
I thought express was better like with cra maybe express is not production ready.
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:
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
I'm currently using angular and nestjs at office because i like typescript a lot.
But NextJS give so much interest...
I know this is completely unrelated, but how much money have you made from donations to your tip jar?
Not much :) it’s not my main source of income of course
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) ?
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-...
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! :)
already started