Why use Next.js?

Next.js is an open-source web framework created by Vercel and built on top of React.

As you probably already know, React is a JavaScript library developed by Facebook for building user interfaces. React allows for the development of reusable UI components and application state management.

So why would one use Next JS over just using React. Well, Next JS offers a few considerable upgrades that streamline the development process. Let's preview a few.

But First, if you're interested in spinning up a quick Next.js app:

1. run npx create next-app <your-apps-name> in your terminal
2. spinning the app up like this will prompt a series of question like if you want to use eslint, TypeScript, Pages Router, etc. Choose your preferences.
3. cd into your app
4. run npm run dev in your terminal, which starts your Next.js app development server on port 3000

Built-in Routing

THE ISSUE:

• React doesn't provide native routing capabilities. We have to use third-party libraries like React-Router to handle client-side routing, specifically when creating multi-page applications.

THE SOLUTION:

• Next.js introduces file-based routing, where the file structure of your project's "Pages" directory determines the routes. Each file in the Pages directory corresponds to a route.

When a file is added to the Pages directory, it's automatically available as a route.

A Page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the Pages directory.

Each Page is associated with a route based on its file name. Let’s just import a Next.js Link component, export your functional React component/Page, and below we'll link our Page back to our home page: index.js with the Link component.

import Link from 'next/link';
import Image from 'next/image';

export default function Presentation() {
  return (
    <>
      <h1>Presentation Page without React Router set-up</h1>
      <h2>
        <Link href='/'>Back to home</Link>
      </h2>
      <Image src='/huh.jpg' width='425' height='375' alt='confused meme' />
    </>
  );

}

Server Side Rendering

THE ISSUE:

• React applications are typically client-side rendered (CSR), meaning the rendering of components happens on the browser side.

THE SOLUTION:

• Next.js offers built-in support for server-side rendering. Server-side rendering (SSR) is the process of rendering a web page on the server and sending the fully-rendered HTML to the client. A big benefit to SSR is that search engines can easily crawl and index pre-rendered HTML content. This leads to improved search engine ranking (easily improved SEO) and visibility for your pages, as compared to CSR where search engines might have difficulty indexing content that relies heavily on JavaScript.

Static Site Generation (SSG)

SSG is a technique where the content of a web page is generated at build time and then served as static HTML files. This means that the server generates the HTML for each page before the application is deployed, and the same HTML is then sent to all users who visit that page. This can greatly improve site wide performance, as the server load is minimized, and users receive pre-rendered content without needing additional processing on the server or client side. This is particularly useful for serving static pages that all users see like: landing pages, e-commerce product listings, blog posts, etc.

Other Reasons to Try Next.js

1. Next.js has automatic code-splitting: the process of splitting the application's bundle into smaller chunks required by each entry point. The goal is to improve the application's initial load time by only loading the code required to run that page.

2. Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.

3. Next.js automatically optimizes images with a built-in Image component that replaces img tags. Plus optimizations for Fonts and Scripts.

4. If you want a more streamlined development experience with fewer configuration requirements, peruse the Next.js docs, which are truly user-friendly, to learn more about the aforementioned features and more.

Resources:

Next.js Documentation (beginner-friendly): Link.
Digital Ocean's: reasons to use Next.js over Plain React: Link

I truly hope you found this info helpful.