This post was aimed mainly for novice programmers who haven't grokked on the frontend frameworks and libraries; I tried to make this post as easy to understand as a I could while making it very informative. My next post will be aimed more for experienced frontend devs: I will be diving more into Nextjs in my next post and by explaining in-depth some difficult things people struggle with, showing you step-by-step on how to not only create a nextjs app to but having a headless content management system (CMS) connected so the information that you show (products, blogs, etc...) can be changed dynamically using Sanity.io and have it Server Side Rendered (SSR) or Incremental Static Regenerated (ISR). I will also explain all of this if you are not concrete about what was said 👨🏻🏫
What you will learn:
- Understand what Next & React are and what they are used for
- What are the similarity & differences between them
- Which one to choose on a project
Table of Contents
What is React
If you are familiar to web developing or programming in general, you have heard the term, React.js, being thrown around. React is a library that makes declarative UI easier to accomplish using hooks and components. Essentially, you can write a chunk of code (mainly using jsx which is like html's sibling but cooler) into a one-liner(). It is declarative because the outcome of said component is predictable and easier to debug than imperative code. You also have these things called hooks that are built-in functions that make handling state, behavior and other logic easier to do in React in comparison to vanilla JavaScript. Also, you can write it anywhere in your project, (hence why React is a library and not a framework although people call it framework because it competes well to Angular and Vue) so you have more flexibility. It also has this thing called Redux which is a library that handles complex state management but we won't get into that 🤒 because there are better and easier ways to manage state in React like using the Context api. I will go more into when to start learning React in a future post soon.
What is Next
Next is a React framework that was created by Vercel in October 25, 2016. Many big companies like Hulu even use it for their websites. It is a very very good choice in building bigger applications that have a lot more functionality and more complex state. Also, it comes with a lot of features out of the box and I've linked the official Next website and talked about some of the features in the TL;DR section but besides those features it brings, it has a structure to it. React is a library so you might feel like you do not know where to start (most frontend devs haven't used a framework if you went the tradition way of html, css, js and react) but Next solves that by having all the things React has, having little to no config with a shit ton of great features that will take you a while to make in React and having a structure built-in by default. This can be a pro or a con to some but if you are planning to make your first big project, I think Next would be a great decision and you would learn a ton about larger websites and how they work under the hood.
Comparing and Contrasting React & Next
I don't think they should be compared this way because both are extremely good at what they do. It really does depend on what you are building and I will dive a bit deeper in what questions you should be asking to yourself or others about what to choose when building your project so you can get not only the most out of it, but as fast and easy as possible.
What should I choose for my upcoming project?
Firstly, you should understand what you want to build out first. Have a rough draft, like an essay, and see what libraries you might want to use; A good start to understand your project is to ask these following questions: Will your project have multiple pages with/without modular css for styling? Will it include state management? How complex will the state be for your website? Will it be a fullstack application? Are you planning to grow this project (CI/CD)? How important is it to have fast load times and do you care about SEO? Once you answered all these questions truthfully, it will give you a good indication on how big/small your upcoming project will be.
TL;DR
React is a library based around Component reusability and uses hooks that have functionality like setting and updating state, having certain callback functions run at runtime and much more. I will make a React hooks post in the future covering all of the most used ones if you guys want me to.
Next is a framework that is built on top of React and makes creating larger projects with more complex state easier to accomplish and maintain. Since it has built-in file-system routing, code-splitting, modular css, image optimization, etc... It is ideal for you if you truly care about how the data is fetched (SSR, ISR), care about SEO, and want to overall add a lot more functionality. It can be a bit overwhelming to conceptualize at first so I will go more into Next very very soon.
The best way to pick which would be better for your upcoming project is understand what you want to build. Is your project going to be a relatively lightweight project? Do you want the best load times possible if you are going to have information changing in short times? Am I going to CI/CD into a SaaS? These and a couple more questions would give you a good basis to decide which would be the best option for you.
Top comments (2)
I highly encourage everyone to critique my post as honest as you can be because it will help me to write better posts and help you to understand as fast as possible 🤗
Also, I've read everyones comments on the previous post and I have created drafts for it and will release them once I finish writing them!!
Like it if you understood this post and want to see more and dislike it if it was hard to conceptualize and too wordy. Once again, I encourage harsh and realistic critiques!!
Currently, I'm working on what should you learn before diving into React