Why Next.js rather than create-react-app ?

The background image is from Morioh

Cet article est disponible en français sur mon blog.

Why bother making a bunch of configurations if you can just start working without bothering? Well, I explain here (with humor) why I recommend to start a new project with Next.js instead of using create-react-app.

Reminder on React.js (create-react-app) and Next.js

React.js, the soldier of the devs' army

So React.js is a JavaScript-based framework (frontend) developed by our developer friends at Meta (you know, the company that wants to go beyond the physical world) in 2013. So it basically allows you:

• have reusable components with features (properties)
• embed JavaScript in HTML with some charisma
• allow components to have life cycles, a state that the dev can influence

Code in React looks like this:

import { useEffect, useState } from "react";

export const NavBar = (props) => {
    const [news, setNew] = useState(false)

    useEffect(() => {
        console.log("We are in NavBar")
    }, [])

    return (
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>{props.serviceName}</li>
                <li>{props.locationName}</li>
                {news && <li>News</li>}
            </ul> 
        </nav>
    )
}

But that's not the point of this article, let's talk about create-react-app. Yes Create React App, the tool created by the team behind React to start a project in react. It's already very good, every React developer has used it at least once:

npm install react-scripts@latest

So with this command you have your React project which is initialized and pata-boom; a minimalist folder, where you literally have to configure everything: from routing to eslint (my pet peeve) to creating the flagship folders. A look at Hudson Kunde's article on Morioh which talks about file structure... Tiring and boring at times. And even with the recent version to have Server Side Rendering it's a lot of work, anyway we're with Client Side Rendering (the rendering of the page based on the JavaScript bundle is done by the browser). Like you've got a cute JavaScript bundle that's thrown at browsers saying: `Hey bro, figure out how to render that JS for me.

And now the Vercel devs are getting into the game.

Next.js, the shield of React

Well, the title is a bit forced but honestly that's how I consider Next.js.

Already Next.js is developed by Vercel in 2016 (now I'm passing my Baccalaureate). Vercel? Well, you know, I think that when the devs of this level are sometimes bored or get up all happy, they say to themselves: what if we develop a project to pass the time? Well, that's exactly what happened. They develop Next.js with the following goals :

• everything is done in JavaScript and everywhere (as if they had thought of me)
• all standard configurations/features including SSR (Server Side Rendering) will be included (I'm telling you, they thought of me)
• ease of deploying a web application (and yes, the Vercel platform is there for that) etc See this article from Wikipedia on the 6 principles behind Next.js.

Basically, Next.js is based on React.js so you'll have to use React's features (state, lifecycle, props,...) but it's the multiple features of Next.js that make it one of my favorite frameworks. In the following I will present you just 3 of these features that I currently use and that are for me the best (experience).

Why then Next.js and not create-react-app

To start a Next.js project you can simply :

npm create-next-app /*et vous suivez les instructions*/

So the 3 features I'm talking about:

Routes based on js/jsx files (pages)

This is a big one: your application's routes are based on the js/jsx files that you create in the pages folder. So if we have:

pages
    - index.js
    - about.js
    - contact.js

then you have the pages:

index.js -> /
about.js -> /about.html
contact.js -> /contact.html

Recognize the class!!! And yes it saves us the: react-router, react-router-browser, react-router-browser-router, etc (I exaggerate) that we needed to manage pages with create-react-app. Ouff!

And they went far (frankly they don't sleep) by making available the api folder inside the pages folder where you can define your api routes (REST for example) if you want to make data/API available to devs or other teams. So no need to go and create another project in Node.js and create a separate API.

Path aliases import in the project

So seriously, I enjoyed it. You remember when we create files (components) in subfolders and when we import we face very long paths of ugliness and errors:

import NavBar from "../../components/somewhere";

Well, Next.js fixes that with path aliases provided by typescript. So you can from any file (in any location/folder) have this finally :

import NavBar from "@/components/somewhere";

Super chic, elegant and deserving of the Oscar for "intuitive solution". And it's easy to do:

• You create a file either jsconfig.json or tsconfig.json (depending on your project)
• You indicate the paths/folders which will be taken into account as path aliases (following example):

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/data/*": ["data/*"],
      "@/layouts/*": ["layouts/*"],
      "@/lib/*": ["lib/*"],
      "@/css/*": ["css/*"]
    }
  }
}

And that's it!

So I'll stop here. Yes, because in terms of innovations, Next.js comes with a lot of features. I haven't touched on image optimization, SWC (Speed Web Compiler) which is 20 times faster than Babel in compiling JS/TS files, rendering issues (SSG, SSR, ISR), using Next.js with Capacitor for hybrid applications, etc. You can visit the [Next.js] website (https://nextjs.org/) for more information.

Finally?

This is not to dismiss create-react-app which is still a great tool but if you're like me and sometimes you like to get started quickly on projects without worrying about config or setup issues then Next.js is for you. And also it's a progressive framework (nothing to do with politics) so improvements and additions are very frequent.

By the way, I deployed on Vercel a mobile oriented application based on Next.js, Chakra UI (UI Components) and Lingui.js for the translation of the site (internationalization) and which is available here.

I will soon propose you to discover these 4 musketeers (frameworks) based on React namely...

I'm sharing some tips I use in my daily tasks and I hope you have others you want to share with us. I'm open to advice, and my social accounts (below) are there for that.

So can you smell what TawalMc is cooking?