Close Menu
Metacognitive

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    Why Self-Awareness Is a Core Pillar in Modern Drug Rehabilitation Clinics?

    May 2, 2025

    The Role Of Javascript In Enhancing The Online Shopping Experience For NFL Jerseys

    February 25, 2025

    Proven Tips To Create Customer Loyalty While Launching Your New Business

    January 27, 2025
    Facebook X (Twitter) Instagram
    Metacognitive
    • Summary
    • Programming
    • JavaScript
    • Productivity
    • Thoughts
    Facebook X (Twitter) Instagram
    Metacognitive
    Home»Metacognitive»Next.js vs. React: what should you use?
    Metacognitive

    Next.js vs. React: what should you use?

    By Jonathan ReynoldsOctober 25, 20226 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Share
    Facebook Twitter LinkedIn Pinterest Email

    React is a tool for building a front end. Next.js serves the same purpose. However, both instruments offer a slightly different set of features. More precisely, Next.js gives you more than React. But it doesn’t mean you should choose it every time.

    See also why I use Next.js in my projects.

    Advantages of React.js

    If you don’t know what React is, it’s an instrument that simplifies the development of web pages. It allows you to build components(thus, separating your pages and UI elements into convenient parts) using an advantageous markup(JSX).

    Angular and Vue do the same job with some implementation differences. However, these tools bring us convenience in developing the web.

    With React, it’s simple to start a project(use create-react-app), and we have a bundler and a compiler. The next step is to run the app with one command. “We got it. It’s simple, fine, fine!”

    To compare React and Next.js, let’s look at what Next allows us to do.

    Next.js benefits

    A satisfactory tl;dr would be: “Next.js is React but with more features.” Next is a framework that uses React. React is a library that gives you the pros you read above, but also it gives you freedom of choice. You may use a different compiler or bundler, or you may use it in the react-native platform. Also, you choose your set of tools: a routing system, an SCSS compiler(if you need SCSS over CSS), and so on.

    Next.js gives you React but with an improved developer experience. You don’t need to spend time making the choices. But if you want, you can, of course.

    Let’s look at the specific benefits of Next over React.

    Routing

    Why care: you don’t need to spend time choosing a router. There are many routers for React, and you may not know the best fit for your situation.

    Next has the router built-in. You only need to put your pages in the `src/pages` folder. So, the “contact.tsx”(`tsx` is a JSX with Typescript) file will be available as a page at “yourAppAddress/contact”. There is dynamic routes support too.

    Static pages generation

    Why care: if you need static pages for your app(e.g., a landing page that leads to the app), and you don’t want to make them dynamic(because of the performance), you’ll need to configure a server that will serve HTML pages in addition to your React app.

    You can generate static pages with Next.js because it has a built-in server.

    Server-side rendering

    Why care: the same thing as above, except that you want to generate a page upon each request.

    Static generation outputs the HTML that will be reused on each request. The Server-side rendering method will generate HTML upon each request. The former is recommended because of better performance.

    Data Fetching

    Why care: if you want to fetch data skipping CORS or get data from the database directly from your app or read files, you’ll need a server.

    Next.js data-fetching methods allow you to do all of that without configuring a server. For example, you can generate a static page using fetching local files at build time. Or, you can request a third-party server omitting CORS because Next has an intermediary – an API server.

    Image optimization

    Why care: you don’t need to think about image optimization. I.e., how to reduce an image size, what format to choose, and how to lazy-load the images.

    There are usually two apparent problems with images:

    1. Image size. I.e., reducing a 3MB JPG into a 40KB Webp.
    2. Loading them after a page is rendered to reduce the network load.

    Next solves these problems for a developer, so they can think about the other parts of the app. All the images inside that use `next/image` will be optimized and lazy-loaded. Also, you may set a loading priority for each of them.

    It uses SWC

    Why care: you need faster build times.

    Next uses SWC, which is, according to their claim, “20x faster than Babel on a single thread and 70x faster on four cores”. Such speeds are a good enhancement during build times and “hot” reloading.

    Built-in ESlint

    Why care: you spend time configuring ESlint.

    Imagine you wrote a few lines of code and already have the lint issues warnings.

    Built-in TypeScript support

    Why care: you want to write in Typescript, but configuring it takes some time.

    This feature is a huge dealbreaker for me because configuring Typescript takes time. Sometimes it’s merely installing the package(`npm install typescript`), and adding the basic `tsconfig.json`. Still, you need to configure it correctly according to your project needs. Since you have various files in a Next.js project(stylesheets, `public` files, JSX, js), imagine going through them to figure out what can be ignored, what rules(configuration) to add, and then to have to break changes with the framework updates.

    Next.js does it for us, yay!

    Environment Variables

    Why care: if you want to store some private information like secrets, API keys, etc., and you don’t want to expose them in an app’s bundle. You may create a server to pull that data from or use some third-party provider, but it takes time and one more place for your code.

    The framework supports `.env` files: create a `.env.local`, add the secrets, and nobody will see them. You may also expose some by prefixing them with `NEXT_PUBLIC_`.

    Scripts handling and performance

    Why care: you’re thinking about lazy-loading some Javascript scripts(3rd-party ones, too), loading them first, or setting any other priority.

    Next.js can do all of that if you use `<Script>` instead of the standard `<script>`. Also, it can offload the scripts to a web worker using Partytown.

    It has a server

    Why care: you need a server environment. E.g., to make database queries.

    We talked about it in the Data fetching section, but it’s a good point to highlight one more time because you may need a server for not data fetching only. For example, maybe you need to do some filesystem-heavy logic and then fetch the results via Next.js API server.

    So, why React, then?

    Next.js has more features than I described here(those I like personally and wanted to highlight). So, we come to the question of why we need React when starting a new project.

    Sometimes, you don’t need such a beast for a simple use-case. For example, if you have a single static page and you don’t fetch any data. Also, you don’t have much dynamic logic. Thus, there’s no need to bring all of the mentioned features because you need to learn the framework(though its docs are great) and the resources to support the build overhead. I.e., why configure the Next.js CI process if you can have merely an HTML page?

    Choose Next.js for a better developer experience, so you don’t need to spend time configuring some tools but coding.

    Jonathan Reynolds

    Jonathan Reynolds is a seasoned mining industry expert with over 15 years of experience in mineral exploration, project management, and strategic development. As a lead content strategist at Kingsrose Mining, he shares insights on sustainable mining practices, investment opportunities, and the future of the industry. Jonathan holds a Master’s degree in Geology from the University of Colorado and has worked on mining projects across North America, Europe, and Asia.

    Javascript
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Jonathan Reynolds
    • Website

    Jonathan Reynolds is a seasoned mining industry expert with over 15 years of experience in mineral exploration, project management, and strategic development. As a lead content strategist at Kingsrose Mining, he shares insights on sustainable mining practices, investment opportunities, and the future of the industry. Jonathan holds a Master’s degree in Geology from the University of Colorado and has worked on mining projects across North America, Europe, and Asia.

    Related Posts

    Why Self-Awareness Is a Core Pillar in Modern Drug Rehabilitation Clinics?

    May 2, 2025

    AI sets new limits for humanity

    May 3, 2023

    How to create a story game with Javascript

    October 27, 2022
    Leave A Reply Cancel Reply

    Recent Posts

    • Why Self-Awareness Is a Core Pillar in Modern Drug Rehabilitation Clinics?
    • The Role Of Javascript In Enhancing The Online Shopping Experience For NFL Jerseys
    • Proven Tips To Create Customer Loyalty While Launching Your New Business
    • AI sets new limits for humanity
    • How to create a story game with Javascript

    Recent Comments

    No comments to show.

    Archives

    • May 2025
    • February 2025
    • January 2025
    • May 2023
    • October 2022
    • September 2022
    • May 2022
    • March 2022
    • January 2022
    • November 2021
    • September 2021
    • August 2021
    • June 2021
    • March 2021
    • October 2020
    • January 2020

    Categories

    • Business
    • Lifestyle
    • Metacognitive
    Facebook X (Twitter) Instagram Pinterest
    © 2025 Copyright Reserved Metacognitive.

    Type above and press Enter to search. Press Esc to cancel.