Introduction to NextJS

Olena Drugalya - May 4 '21 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .