The Rise of Next.js: Should You Use It for Your Next React Project?

Published on 5.7.2020

Next.js has quickly become the go-to framework for React developers who want a more powerful, flexible, and scalable way to build React applications. It’s an opinionated framework built on top of React that provides server-side rendering (SSR), static site generation (SSG), and a variety of powerful features out of the box.

In this blog post, we’ll explore why Next.js has become the default framework for React projects, its core features like SSR and SSG, and how to migrate from Create React App (CRA) to Next.js.

---

Why Next.js Became the Default React Framework

While React is a powerful library for building user interfaces, it doesn’t come with built-in solutions for routing, server-side rendering (SSR), or static site generation (SSG). These features are incredibly valuable for performance, SEO, and scalability, but developers had to implement them manually or rely on third-party libraries.

This is where Next.js comes in.

Next.js was created by Vercel to address these pain points and make building React applications easier and more efficient. With Next.js, you get:

• Automatic Routing: No more configuring a routing library like React Router. Next.js uses a file-based routing system, where the folder structure of your pages/ directory automatically generates routes.
• Server-Side Rendering (SSR): Next.js provides SSR out of the box, allowing you to render pages on the server before sending them to the browser, which helps improve performance and SEO.
• Static Site Generation (SSG): Next.js can generate static HTML pages at build time, making it easy to create fast, SEO-friendly static websites.
• Automatic Code Splitting: Next.js automatically splits your code into smaller chunks, so your users download only the necessary JavaScript for the page they’re viewing, improving load times.
• Optimized Performance: Next.js optimizes your app for performance through automatic image optimization, script loading, and more.

These features have made Next.js an obvious choice for developers who want to focus on building apps without worrying about manually configuring SSR, SSG, or routing.

---

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

1. Server-Side Rendering (SSR)

Server-side rendering means rendering a web page on the server instead of in the browser. When a user requests a page, the server returns fully rendered HTML, CSS, and JavaScript, rather than just sending JavaScript code that needs to be executed in the browser.

Why SSR is beneficial:

• Improved SEO: Since the content is already rendered when it reaches the browser, search engine crawlers can index the page easily.
• Faster Initial Load Time: Users get a fully rendered page much faster, which can make the app feel snappier.
• Better Performance: SSR can be used in combination with caching strategies, making page loads faster for returning visitors.

In Next.js, SSR is easily achieved by exporting an async function getServerSideProps() from a page component. Here’s a quick example:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>SSR Example</h1>
      <p>{data}</p>
    </div>
  );
};

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // This will be passed as props to the Home component
  };
}

export default Home;

2. Static Site Generation (SSG)

Static site generation generates HTML for each page at build time. The HTML is generated and cached, so the page loads very quickly when requested by the user.

Why SSG is beneficial:

• Fast Load Times: Since the HTML is pre-built, static pages are extremely fast to serve to users.
• Improved SEO: Search engines can crawl and index static pages quickly and accurately.
• Reduced Server Load: Static sites don’t need server-side processing for each request, reducing server load and improving scalability.

In Next.js, SSG is handled through the getStaticProps() function. Here’s an example:

// pages/index.js
import React from 'react';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Static Site Generation Example</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts }, // This will be passed as props to the Home component
  };
}

export default Home;

Both SSR and SSG have their place in Next.js. SSR is ideal for content that changes frequently (like a dynamic user dashboard), while SSG is great for static content (like a blog or a landing page).

---

Migrating from Create React App (CRA) to Next.js

If you already have a project built with Create React App (CRA) and want to migrate to Next.js, the process is relatively simple, as Next.js builds on top of React’s core principles. However, there are some key differences to consider.

1. File Structure

Next.js uses a file-based routing system. Instead of manually configuring routes with React Router, your pages/ directory defines your routes. For example:

• pages/index.js is the homepage (/ route).
• pages/about.js is the About page (/about route).

If you were using React Router in CRA, you’ll need to remove it and adopt the file-based routing approach.

2. Removing public/index.html

CRA includes an index.html file in the public/ directory where you manually place your HTML structure. In Next.js, this is handled automatically, and you don’t need an index.html file.

3. Handling Static Assets

In CRA, static files like images or CSS can be placed in the public/ folder, and you can reference them with relative paths. In Next.js, static files should be placed in the public/ directory at the root level. The URL paths are automatically handled by Next.js.

For example:

• In CRA, you might reference an image like this: <img src="/assets/logo.png" />
• In Next.js, the same image would be placed in public/assets/logo.png, and referenced like: <img src="/assets/logo.png" />.

4. Handling CSS and Styles

Next.js supports both global CSS and CSS Modules. If you’re using CSS Modules or libraries like styled-components in your CRA app, they will work in Next.js without any changes.

For global CSS, you can import it in your _app.js file:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

5. Managing SSR and SSG

Once your app is running in Next.js, you can choose to either use SSR or SSG based on the needs of each page. As mentioned earlier, SSR is achieved using getServerSideProps(), and SSG uses getStaticProps().

---

When to Use Next.js

Next.js is ideal for:

• SEO-driven applications (blogs, marketing websites, etc.).
• E-commerce websites that need fast, dynamic content delivery.
• Large-scale React apps where SSR or SSG can improve performance.
• Content-driven apps where you need to serve content to the user as quickly as possible.

Conclusion

Next.js has become the default React framework due to its powerful features, including server-side rendering, static site generation, automatic routing, and performance optimizations. Whether you are building a simple static site or a complex React app, Next.js provides a flexible and scalable solution. If you’re using Create React App, migrating to Next.js can significantly improve your app’s performance and SEO.

If you haven’t already, consider giving Next.js a try for your next React project!