Next.js, a blazing-fast React framework, is the preferred choice for data-intensive streaming platforms like Hulu and Netflix. For developers already familiar with React, exploring this rapidly growing technology is highly recommended.

While both React and Next.js excel in crafting efficient web user interfaces, they exhibit distinct characteristics. Next.js, with its richer feature set and more opinionated nature, proves particularly advantageous for websites prioritizing search engine optimization (SEO) or pre-rendering.

Next.js vs. React

Having debuted in 2013, React boasts a longer track record compared to Next.js. However, since its release in 2016, Next.js has experienced a surge in popularity, amassing over 113K GitHub stars as of October 2023 and garnering millions of weekly npm downloads. Let’s delve into a comparative analysis of Next.js and React, highlighting their strengths and when to opt for one over the other:

• Development speed: Next.js streamlines the development process for sophisticated React applications with its ready-to-use features. The framework’s own compiler, introduced in Next.js 12, further accelerates build times. Compared to React, Next.js minimizes the wait time for code refreshes, enhancing developer productivity and reducing frustration.
• Data fetching and load times: Next.js has the capability to prefetch data on the server by traversing the React component tree. This often leads to faster loading times for Next.js pages in contrast to those built with plain React.
• Rendering and SEO: Next.js offers pre-rendering, while React relies on client-side rendering. Pre-rendered pages facilitate effective SEO strategies that are challenging to implement in a standard React application.
• Routing: Next.js enforces a structured, predefined file system for routing. While this approach may offer less flexibility compared to React’s diverse library options (like React Router), it simplifies both page setup and routing logic.

React proves highly versatile for various project types, such as user dashboards, back-end systems, internal tools for organizations, and data visualization platforms. Next.js shines as the perfect toolkit for enhancing React applications that stand to benefit from pre-rendering, including e-commerce sites, social media platforms, ticket booking systems, and educational platforms. Let’s explore some of its use cases in greater detail to help you determine, “Should I use Next.js?”

Rendering in Next.js

Rendering transforms React code into the HTML that a user’s browser ultimately displays as a web page’s user interface. Next.js offers three distinct rendering methods: client-side rendering (CSR), server-side rendering (SSR), and static site generation (SSG). Additionally, Next.js introduces incremental static regeneration (ISR), a hybrid approach combining server-side rendering with a semi-static caching mechanism. This technique reduces server load while delivering speeds comparable to those of a static site.

Both server-side rendering and static site generation belong to the pre-rendering paradigm, where HTML pages are generated in advance before being sent to the client. One of Next.js’s significant strengths lies in its robust support for pre-rendering React applications.

Client-side Rendering

Client-side rendering represents the default behavior for vanilla React applications. With this method, the generation of the page’s HTML occurs on the client side, meaning that rendering happens within the user’s browser. JavaScript executed on the user’s device takes care of generating the HTML. The UI becomes visible once the rendering process completes, and the webpage becomes interactive (i.e., hydrated).

CSR can be implemented in Next.js components using React’s useEffect or useSWR hooks.

Server-side Rendering

Next.js also allows for the generation of a page’s HTML on the server. In this scenario, the server sends the pre-generated HTML to the client, allowing the webpage’s UI to appear before the hydration process. The webpage becomes interactive after the client finishes initializing the necessary JavaScript.

Enabling server-side rendering in Next.js requires adding specific configuration functions to the page.

Static Site Generation

Next.js further provides static site generation, a process where all static HTML pages are rendered from the JavaScript code at build time. While generating a static site from a React codebase generally demands more upfront build time compared to a React single-page application, it offers the advantage of serving static content that can be cached for optimal speed without the computational overhead of SSR.

To implement static site generation, you can use getStaticProps() and getStaticPaths(). The latter defines the routes for the statically generated pages, while the former allows you to fetch data for the pages SSG on Next.js pages statically.

Next.js Search Engine Optimization

Next.js’s speed and inherent ability to pre-render every page of a website make it easier for search engines to crawl and index the site, ultimately boosting SEO. Achieving strong SEO is paramount for many businesses and websites since better SEO typically translates to higher rankings in search results. Users tend to favor higher-ranked websites, with the top result enjoying an average click-through rate of 27.6%. This rate is ten times higher than the tenth result’s click-through rate of 2.4%.

React websites handling substantial content—and consequently, a large amount of JavaScript code for rendering—often encounter SEO challenges related to Google’s crawling and indexing processes.

Next.js’s ability to effortlessly perform server-side rendering (SSR) not only improves SEO rankings but also enhances both the perceived and actual loading speed of a website, contributing to a better user experience.

Getting Started With Next.js

Now, let’s cover the fundamentals of Next.js setup, routing, pages, and navigation to equip you with the tools to leverage the power of pre-rendering and SEO. Before diving into our Next.js tutorial, ensure that your system has the latest version of Node.js downloaded installed. You can check the Node.js version on your machine by running node --version.

Setting up a Next.js project can be done in two ways:

• Automatic setup, which comes with predefined configurations
• Manual setup, allowing for custom Manual setup and configurations

For simplicity, we’ll opt for the automatic setup to quickly get our project up and running. The create-next-app command-line interface (CLI) tool manages the automatic setup process, making it incredibly efficient to bootstrap new applications. Let’s create our project and take advantage of Next.js’s built-in support for TypeScript, a statically typed superset of JavaScript, to ensure proper code structure:

1

npx create-next-app@latest --typescript

The create-next-app command will prompt you for your desired application name. Remember that your project name must adhere to certain conventions: it should only contain lowercase letters and use hyphens instead of spaces. For instance, I’ve named my application next-js-tutorial. Once the setup successfully completes, you should see a confirmation message in your terminal.

Inspecting our newly created project, we can observe Next.js’s structured file organization:

• The website’s core components, pages and styles, reside in their respective folders.
• APIs are grouped under the pages/api folder.
• Assets meant to be publicly accessible are stored within the public folder.

Next.js Routing and Pages

Next.js leverages the file structure within its pages directory to define the application’s routes.

All routes are defined within the pages folder. The pages/index.tsx file serves as the application’s default entry point, providing a centralized location to define custom fonts, application tracking codes, and other elements requiring global access.

Adding new routes can be accomplished through two methods:

• Directly create a file ending in .tsx within the pages folder.
• Create a new subfolder within pages and place an index.tsx file inside it (any index file will automatically be routed to its directory root).

Let’s solidify our understanding with some concrete Next.js routing examples. We’ll implement a straightforward page route for our tutorial, followed by a brief exploration of nested and dynamic routing concepts.

Page Routes

Adding a simple page route, such as about-us, can be done by creating an about-us.tsx file:

1
2
3
4
5

|— pages
|    |— _app.tsx
|    |— about-us.tsx
|    |— api
|    |— index.tsx

Alternatively, you can achieve the same result by using an index.tsx file placed within a pages/about-us folder:

1
2
3
4
5
6

|— pages
|    |— _app.tsx
|    |— about-us
|    |    |— index.tsx
|    |— api
|    |— index.tsx

Feel free to add the about-us.tsx page route to your project.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import styles from '../styles/Home.module.css'

const AboutUs: NextPage = () => {
  return ( 
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          About Us Example Page
        </h1>
      </main>
    </div>
  )
}

export default AboutUs

We’ll witness page routing in action when we combine it with Next.js navigation. For the time being, we’ll simply return a placeholder NextPage component with a title string to ensure proper navigation functionality.

Nested Routes

Nested routes prove valuable when dealing with multiple layouts that need to be reused and selectively updated within a page. For instance, when a user clicks a URL, you might wish to update the main content area while preserving the existing header and footer layouts.

1
2
3
4
5
6

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— parent
|    |    |— child.tsx

In this case, the nested route /parent/child is defined by a parent folder containing a nested child folder or file (our example demonstrates this with a file).

Dynamic Routes

Dynamic routes empower layouts to adapt to real-time data changes in situations where predefined paths are insufficient. Let’s imagine you want to implement a /product/[productId] route (e.g., when a user clicks on a specific product, its details should expand within the UI). Assuming that productId represents a variable accessible within your definition of a Product component, creating a dynamic route is as straightforward as creating a product folder and enclosing your productId page within brackets:

1
2
3
4
5
6

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— product
|    |    |— [productId].tsx

With this setup, a route like product/testId will have its query parameters set accordingly (i.e., productId will be set to testId).

Furthermore, it’s worth noting that you can combine different routing techniques. As an example, you could create a nested dynamic route like pages/post/[postId]/[comment].tsx.

Next.js Navigation

Next.js employs its custom Link component for navigation between client-side pages instead of the standard <a> HTML tag. This allows Next.js to optimize navigation and data pre-fetching. The Link component operates similarly to the <a> tag, using the href attribute to specify the target route. However, you need to use the passHref prop the passHref prop to ensure that the Link component correctly passes its route value to any child components (this is especially relevant when working with custom-styled components).

The primary advantage of using Link over the <a> tag lies in its ability to pre-load data in the background when a user hovers their mouse over or near a link. This background pre-loading makes the content more readily available for the client to process, leading to noticeable improvements in application performance. You can still utilize the <a> tag in Next.js when linking to external websites or resources outside your application’s scope.

To add a link to our About Us page from the Next.js project blueprint, let’s open the pages/index.tsx file, which serves as our main application file. First, import the Link component from next/link, and then add a linked paragraph below the <h1> component:

1
2
3

<p className={styles.description}>
  Here's our example <Link href="/about-us">About Us</Link> page
</p>

Now, you can run the application using the npm run dev shell command, navigate to http://localhost:3000 in your web browser, and test out our newly added text and About Us page link at http://localhost:3000/about-us (this is the route displayed in your browser’s address bar after clicking on the About Us link).

Supercharge Web Apps With Next.js

When embarking on the development of your next website, numerous factors warrant careful consideration when selecting the ideal framework. Although Next.js embraces a more opinionated and less flexible approach than React, it compensates by offering exceptional out-of-the-box functionality for ambitious projects that prioritize SEO or require advanced pre-rendering capabilities. By incorporating the core principles and features of Next.js into your toolkit, you gain the ability to supercharge your site’s performance and gain a competitive edge over traditional vanilla React applications.

The editorial team of the Toptal Engineering Blog extends its sincere gratitude to Richard Plotkin for his invaluable contributions in reviewing the code samples and providing technical insights for this article.