Learn Programming
Next JS vs React JS
ChatGPT & Benji Asperheim— Fri Sep 20th, 2024

Next JS vs React JS

In this blog post we’ll go over the differences between a typical React app, and the Next.js framework (a server-side rendered (SSR) and static site generated framework) used in conjunction with a React app.

DISCLAIMER: The majority of this article was written by ChatGPT, but edited and touched up by a human.

Next.js Overview

Let’s go over the basics of Next.js, what its use cases are, and how it’s used.

Does Next JS use React?

Unlike a standard React app, which renders content on the client side and requires additional setup for SSR, Next.js provides these capabilities out of the box. It acts as an abstraction layer on top of React, handling the compilation and bundling processes to enable SSR and other optimizations seamlessly.

In essence, Next.js simplifies the development of performant, SEO-friendly web applications by:

So, while Next.js does act as a sort of SSR compilation layer on top of React, it also offers a suite of tools and conventions that simplify building complex web applications. It abstracts away much of the configuration required for SSR, allowing you to focus on writing your application’s logic and UI.

When to use Next JS vs React

When deciding when to use Next JS vs React, it’s essential to consider the specific needs of your project. React is a powerful library for building user interfaces, providing flexibility and a component-based architecture ideal for single-page applications. However, if you’re looking to enhance performance and optimize for SEO, Next.js offers server-side rendering, static site generation, and built-in routing, making it a superior choice for dynamic, content-rich websites.

For projects requiring quick loading times and better search engine visibility, Next.js shines. Conversely, if your application is less content-focused and demands greater interactivity, React might be the better option. Ultimately, understanding your project’s requirements and long-term goals will guide you in choosing the right tool.

Difference Between React and NextJS

Next JS vs React: A Comparison of Folder Structures

In this section, we will explore the folder structure best practices for both Next JS and React.

React JS Structure Best Practices

For React, the folder structure best practices would look something like this:

React Example Structure:

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   ├── App.js
│   └── index.js
├── package.json
└── README.md

Next JS Project Structure

Next.js used to have a project structure like so:

my-nextjs-app/
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── index.js
│   └── about.js
├── public/
│   └── images/
├── styles/
│   └── Home.module.css
├── package.json
└── README.md

However, in Next.js v13, there were some changes made to the file structure and routing approach compared to previous versions.

Changes in the Next JS Project Structure

  1. App Directory: In Next.js 13 and later, a new app directory is introduced as an alternative to the pages directory. This allows for a more flexible routing system and improved data fetching methods.

  2. File Structure:

    • Old Structure: In earlier versions, you had a pages directory where each file directly corresponded to a route.
    • New Structure: The app directory in Next.js 13 includes files like layout.tsx and page.tsx for defining layouts and pages, which makes it more powerful and modular.

  3. Manual Setup: You don’t need to manually create src/app/pages. Instead, you should use the provided structure in the app directory. The new routing mechanism simplifies some patterns, while also requiring you to adapt to the new conventions.

Transition from Pages to App Router

If you’re following the new structure, here’s a simplified view of how it works:

See the following boilerplate project generated by the latest version of Next.js:

├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── src
│   └── app
│       ├── favicon.ico
│       ├── fonts
│       │   ├── GeistMonoVF.woff
│       │   └── GeistVF.woff
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.module.css
│       └── page.tsx
└── tsconfig.json

4 directories, 13 files

The old “pages” structure is still valid for Next.js projects using the traditional routing system. However, with Next.js 13 and beyond, the app directory structure is the recommended approach, which can be quite different.

If you’re using Next.js 13 and the App Router, you should follow the new conventions without needing to create a pages directory inside app. Just use the provided files in src/app.

It’s a good idea to keep this in mind when setting up your NextJS file structure:

Benefits of the New Structure

How is Next JS Different from React?

There are a few differences in how certain features are implemented or used due to Next.js’s additional functionalities. The syntax for JSX (JavaScript XML) is the same in both React and Next.js, because Next.js is built on top of React, but let’s go over some of the differences in how JSX is used in each.

Special Functions in Next.js

Next.js introduces special functions for data fetching that are not used in typical React apps:

These functions are exported from page components and are used during the build process or server-side rendering.

Next.js Special Function Example:

// pages/index.js
export async function getStaticProps() {
  // Fetch data here
  return {
    props: {
      /*...*/
    },
  };
}

export default function Home(props) {
  // Use fetched data
}

React uses react-router-dom for routing and navigation:

// React with react-router-dom
import { Link } from "react-router-dom";

<Link to="/about">About</Link>;

However, Next.js uses its own Link component from next/link:

// Next.js
import Link from "next/link";

<Link href="/about">About</Link>;

NOTE: In Next.js, the Link component wraps an <a> tag. In older versions, you had to include an <a> inside Link, but since Next.js 11, you can pass the link text directly.

Images in Next.js

Next.js handles image optimization very well with the next/image library. In a standard react app you typically use a traditional <img> tag, or third-party libraries for image handling:

<img src="/images/photo.jpg" alt="Photo" />

However, Next.js provides the Image component for automatic image optimization:

import Image from "next/image";

<Image src="/images/photo.jpg" width={600} height={400} alt="Photo" />;

Overview of Next JS Image Lazy Loading

Here’s a simple example of how to implement lazy loading for images in a Next.js application:

// pages/index.js
import Image from "next/image";

const Home = () => {
  return (
    <div>
      <h1>Lazy Loading Images in Next.js</h1>
      <p>This image will be lazy loaded:</p>
      <Image
        src="/path/to/your/image.jpg" // Path to your image
        alt="Description of the image"
        width={600} // Desired width
        height={400} // Desired height
        loading="lazy" // Optional, default is lazy
      />
    </div>
  );
};

export default Home;

Using the next/image component not only enables lazy loading but also optimizes images automatically for different screen sizes and formats, improving performance and user experience.

CSS and Styling for a Next.js App

When using inline styles in Next.js, you can apply styles directly to your components without creating separate CSS files. This approach is useful for quick styling or dynamically changing styles based on component state. However, for larger projects, it’s generally better to use CSS modules or styled-components for maintainability.

The following is an example of how to use styles in a Next.js web app:

// pages/index.js
const Home = () => {
  return (
    <div>
      <h1 style={{ color: "blue", textAlign: "center" }}>Welcome to My Next.js App!</h1>
      <p style={{ fontSize: "18px" }}>This is a simple example of inline styles.</p>
    </div>
  );
};

export default Home;

In this example, inline styles are applied to the header and paragraph directly, allowing for quick customization of their appearance.

Next JS React Environment Variables

In a Next.js app you can use the @next/env library to (see the Next.js environment variables documentation for more details).

Install the package like so:

npm install @next/env

Then just create a envConfig.ts to load the variables with the following code:

import { loadEnvConfig } from "@next/env";

const projectDir = process.cwd();
loadEnvConfig(projectDir);

NextJS vs React: Page Component Export

If you intend to create a Next JS single page app, then you should keep in mind the key differences in how a component is exported in React vs Next.js:

React Components: These can either be named, or default export components using the export default keywords:

// Named export
export function Home() {
  /*...*/
}

// Default export
export default function Home() {
  /*...*/
}

Next JS Components: Page components should be the default export of the file in the pages/ directory:

// Next.js page component
export default function Home() {
  /*...*/
}

NextJS SSR

Next.js Server-Side Rendering (SSR) allows you to render pages on the server at request time, delivering fully populated HTML to the client. This enhances performance and SEO since search engines can easily crawl the content.

Server-Side Rendering (SSR) and Static Site Generation (SSG):

In Next.js, you have the ability to pre-render pages:

In React, to achieve SSR or SSG, you’d need additional tools or frameworks.

Overall Differences Between Next JS and React

Similarities: Both use JSX syntax for rendering components.

Differences:

React Router vs Next JS

React Routing Example:

// src/App.js
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

Next JS React Router

In Next.js, routing is handled differently compared to traditional React Router. Instead of using a separate router package, Next.js has a built-in file-based routing system. The introduction of the /app directory replaces the traditional /pages directory, offering a more flexible and modular approach to routing and layout management. Here’s how the new structure works:

Next JS Examples Using the ‘app’ Directory

File-Based Routing: The /app directory uses file-based routing, where the file structure directly maps to the application’s routes. Each folder inside /app can contain specific files for layout and page components.

Key Files:

Nested Routes: You can create nested folders inside /app to manage sub-routes easily. For example, if you have an /app/blog directory, the corresponding route would be /blog.

Next JS React Router: Simple Route Example

Here’s a basic example of how a Next.js component would look:

// pages/index.js
import Link from "next/link";

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <nav>
        <ul>
          <li>
            <Link href="/about">About</Link>
          </li>
          <li>
            <Link href="/blog">Blog</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Home;

Next JS React Router: Dynamic Route Example

Here’s how you can handle a dynamic route:

// pages/blog/[id].js
import { useRouter } from "next/router";

const BlogPost = () => {
  const router = useRouter();
  const { id } = router.query; // Get the dynamic id from the URL

  return <h1>Blog Post ID: {id}</h1>;
};

export default BlogPost;

Next.js uses the Link component for client-side navigation. This allows for smooth transitions between pages without full page reloads, maintaining a single-page application feel.

Next JS vs Create React App

When comparing Next.js to Create React App (CRA), it’s important to recognize their fundamental differences in purpose and capabilities. Next.js, initiated with npx, offers a full-fledged framework for building server-rendered applications, enabling features like server-side rendering (SSR), static site generation (SSG), and API routes out of the box.

In contrast, Create React App focuses primarily on creating single-page applications (SPAs) with a client-side rendering model. While CRA provides a solid foundation for React applications, it lacks the built-in optimization and routing capabilities that Next.js delivers, making Next.js a more powerful choice for projects that require enhanced performance and SEO features.

Next JS npm and npx Commands

Best practices for Next JS suggest following the Next.js documentation and running the npx create-next-app@latest, like in the following example, to create a new app:

npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.13
Ok to proceed? (y) y

✔ What is your project named? ... blog-app
✔ Would you like to use TypeScript? ... No / Yes
✔ Would you like to use ESLint? ... No / Yes
✔ Would you like to use Tailwind CSS? ... No / Yes
✔ Would you like to use `src/` directory? ... No / Yes
✔ Would you like to use App Router? (recommended) ... No / Yes
✔ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in /Users/benji/Downloads/Coding-Projects/blog-app.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

⠏

Change into the new project directory, and then you run the app with npm like so:

npm run dev

Finally, navigate to http://localhost:3000 in your browser to view the app.

Next JS Screenshot of Next JS vs React NextJS Tutorial

Next JS Advantages

Next.js has several key advantages over a regular React app, but it also has a few “gotchas” and drawbacks.

Traditional React App

Advantages:

Disadvantages:

Advantages of Next JS over React

Advantages:

Disadvantages:

When to Use Next JS vs React

Use Traditional React App When:

Use Next.js App When:

Conclusion

Next.js is a framework built on top of React, enhancing it with additional features like server-side rendering, static site generation, and built-in routing.