I'm a Frontend Developer and designer. I learn and teach everything about Web Technologies and Design.

Costa Rica (GMT-6)

🇪🇸 Traducir
InstagramTwitterYoutubeGithubLinkedInStackOverflow

Difference between Reactjs and Nextjs

Freddy Montes - Frontend Developer, Designer and Teacher
Freddy Montes|

In short, React is a library, and NexJS is a framework, but do you know the difference between each?

What is a web app

To build a modern web app, you need at least these three things

  1. A component library to display content and allow users to interact
  2. A routing system to navigate through the sections or pages in the app
  3. A build system to package-ready the app to be published to the internet
Reactjs vs Nextjs

Library vs. framework

Libraries and frameworks are code that someone else wrote to help you solve common problems while writing your application.

Libraries

Libraries are to solve a specific problem in your app. For example:

  • Routing
  • Dates management
  • Transform data

Some popular JavaScript libraries:

  • date-fns: Modern JavaScript date utility library
  • Ramda: A practical, functional library for JavaScript programmers.
  • Parsley: the ultimate JavaScript form validation library

Frameworks

It can be everything you use to develop your web app. Typically is a collection of libraries that work together in some opinionated way to help you build a fully functioning app.

Some popular JavaScript frameworks

  • Angular: provide routing, fetching data, components, testing, and more
  • Nuxt.js: same as Next.js but instead of Reactjs, uses Vue
  • Express.js: is NodeJS framework for the server

Reactjs vs. Nextjs

React is a JavaScript library that helps you to build user interfaces using components as building blocks.

Reactjs do one part of all the web app, which is to build UI components to show content.

NextJS is a framework with a set of libraries that work together to build a web app, and one of those libraries is Reactjs.

React is used by Nextjs not only to create components in the UI but to build full pages.

Other libraries used by Nextjs are:

  • next/router for routing and navigation
  • next/link a component that allows our web app to link pages and lazy load data
  • next/image a component to load images into the pages in the most performant way

Conclusion

Nextjs as a framework allows you to use React library to build pages and UI for your web app.

Reactjs as a library is part of a framework, the UI components part.


Thank your read this blog post. Any feedback or question hit me up on Twitter: @fmontes