Next.js vs React: What are the differences?

React.js and Next.js are both popular JavaScript frameworks used for building web applications.

1. React JS (official Documentation)

• React.js is a front-end JavaScript library developed by Facebook.
• It allows developers to build interactive user interfaces for web applications.
• React.js follows a component-based architecture, where UI elements are broken down into reusable components.
• React.js is mainly focused on client-side rendering, which means the rendering of components happens in the user’s browser.
• It provides a Virtual DOM, which optimizes the rendering process by updating only the parts of the UI that have changed.
• It does not offer server-side rendering (SSR) out of the box, which can lead to less favorable SEO and slower initial loading times for web pages.

2. Next JS (official Documentation)

• Next.js is a framework built on top of React.js, developed to enhance its capabilities and add extra features.
• It is designed for server-side rendering (SSR) and provides an easy way to implement it.
• Next.js also supports static site generation (SSG), where pages can be pre-rendered at build time, leading to better performance and SEO benefits.
• Automatic code splitting is supported in Next.js, which means only the required JavaScript code is sent to the client, reducing the initial loading time.
• It offers features like file-based routing, where pages are organized based on the file structure, making the project more intuitive and easy to manage.

Let’s see some practical examples to illustrate the differences between React.js and Next.js.

Data fetching Method :

1. React js :

You want to create a simple single-page application (SPA) that fetches and displays a list of books from an API.

// App.js (main component)
import React, { useState, useEffect } from 'react';

const App = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    // Fetch books data from API
    fetch('https://api.example.com/books')
      .then(response => response.json())
      .then(data => setBooks(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>List of Books</h1>
      <ul>
        {books?.map(book => (
          <li key={book?.id}>{book?.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

2. Next Js :

let’s see how the same example could be implemented using the Next.js

import React from 'react';

const BooksPage = ({ books }) => (
  <div>
    <h1>List of Books</h1>
    <ul>
      {books?.map(book => (
        <li key={book?.id}>{book?.title}</li>
      ))}
    </ul>
  </div>
);

export async function getServerSideProps() {
  // Fetch books data from API
  const response = await fetch('https://api.example.com/books');
  const data = await response.json();

  return {
    props: {
      books: data,
    },
  };
}

export default BooksPage;

getServerSideProps function is a special function that allows us to fetch data from the server on each request, enabling server-side rendering for the BooksPage component. The data is passed as props to the component, and Next.js handles the server-side rendering automatically.

How to Handle Routing?

1. React Js :

React.js itself does not provide built-in routing capabilities. Use third-party libraries like React Router to handle client-side routing within a React application.

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  <Router>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
);

export default App;

2. Next js :

Next.js provides a file-based routing system. You can create new pages by simply adding React components in the pages directory. The file names within the pages directory automatically become the routes.

// pages/index.js (Home component)
const Home = () => <div>Home Page</div>;

export default Home;

// pages/about.js (About component)
const About = () => <div>About Page</div>;

export default About;

Next.js automatically handles the routing based on the file names and folder structure under the pages directory. No additional routing configuration is required

In summary, React.js is a front-end library for building user interfaces and is focused on client-side rendering, while Next.js is a framework that extends React.js with server-side rendering and additional features to improve performance and SEO. Choosing between them depends on the specific needs of your project.