What do React vs. Next.js projects look like?

First let's start by finding out more about React and Next.js

React

Facebook originally developed React, which has now grown to be one of the most widely used libraries in the frontend industry. With the help of frameworks like Redux, React can be quickly expanded to include features like routing and state management patterns. Although React has a small footprint, it can be tailored for practically any project. Visit the official React documentation to learn more in-depth information on React.

Next.js

Based atop of React, Next.js was developed as a user-friendly programming framework. It was created by Vercel (formerly Zeit) and uses a lot of React's well-liked features. Next.js has features like pre-rendering, routing, code splitting, and support for Webpack out of the box. Visit the official Next.js documentation for additional information.

Installing Node.js on your computer and running npx create-react-app my-app will get you started with React. As the starting point for the application, the src/App.js file will be created as the basic project structure.

A service worker and a way to bring in Jest for testing are also included in the first scaffold, along with a public folder where you may put assets. The initial scaffold appears as follows:

├── README.md
├── package.json
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
└── yarn.lock (or package-lock.json)

With Next.js, you can get started by running npx create-next-app. This will scaffold out a project that already has a pages folder for the pages or routes and a public directory that hosts your assets. The initial scaffold looks like this:

├── README.md
├── package.json
├── node_modules
├── pages
│ ├── _app.js
│ ├── api
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
└── yarn.lock (package-lock.json)

At the end of the day, both React and Next.js provide solid developer experiences. I hope the comparisons and discussions I’ve included here give some insight to how you could use them with your projects. I encourage you to check them out, and check out my sample projects as well.

Do you want to dive more into the difference between React and Next.js ?? Let me know in the comments