Next.js — The React Framework

JavaScript has come a long way, from being a simple scripting language that was used to sprinkle some interactivity on web pages, to a fully-blown programming language that is now used for full-stack development for all sorts of applications and websites.

As JS evolved, numerous tools, libraries, and frameworks were created to solve various development challenges and common problems. These include task runners like Gulp.js and Grunt, as well as frameworks and libraries like Vue.js, Angular, React, Svelte, and Next.js.

One such JS framework we'll look at today is Next.js (or Next) — The React framework — exploring some of its high-level concepts and features.

Let's jump right in!

Next.js Framework Introduction

Next.js is a React framework for creating full-stack websites and web applications. As it's built on top of React, it's easier to pick it up if you have a good knowledge of React and JavaScript. Of course, like with any new framework, there's a learning curve as you dive into its advanced features.

It's an opinionated framework as it comes with a defined set of rules to organize the project and code. That being said, it still provides developers with the flexibility to adopt various coding styles and mix and match different web technologies without being overly restrictive.

For instance, you can pick vanilla CSS or Tailwind CSS, or use pure JavaScript or TypeScript with Next.js, along with other choices.

Who Is Next.js For?

Whether you're a solo developer or work in a team, Next.js helps you rapidly build sophisticated, highly performant, and secure web applications.

Who Uses Next.js?

Next.js is used and trusted by some of the largest companies, such as IGN, OpenAI, Nike, AT&T, and more.

Why Use Next.js over React?

You could use React to build applications and websites, so why choose Next.js?

Here's the thing. React doesn't provide a structured or single approach for building web apps. It allows you to employ various strategies and solutions to solve common development challenges and problems while leveraging its features. Hence, the UI library part.

That means it's still up to you to decide how to architect the web project — from file and folder organization, code splitting, and data fetching, to routing, state management, caching, and more. Depending on the project's complexities and timeframe, it may be ideal to choose a framework that fulfills all these requirements.

And that's where Next.js steps in. Apart from ticking all those checkboxes, it offers additional useful features that help developers rapidly build and deliver highly interactive and dynamic web applications without worrying about the underlying architecture.

Therefore, Next.js is often the preferred choice when starting blank; especially for large, complex React web applications.

Even the React website suggests using a framework like Next.js or Remix when starting a new React-based website or application.

Next.js Features and Benefits

Let's take a look at some of the key features and benefits of Next.js. Keep in mind that this is not an exhaustive list of the features to keep the scope of this article.

Front End, Back End, or Full Stack

One of Next's remarkable features is that it can be used and deployed in various ways, either as a front end, back end, or full stack.

If the website is static (e.g., a landing page with a couple of blogs for a business site), then Next can be used as a Static Site Generator (SSG). This generates static HTML pages, resulting in a fast page load time, which is good for SEO and user experience (UX).

On the other hand, if the website is complex; involving authentication, database, users, and whatnot, then Next can be used full-stack, leveraging Server-Side Rendering (SSR) and other back-end features. A suitable example would be an e-commerce store.

Furthermore, with the power of awesome features like Incremental Static Regeneration (ISR), you can configure specific pages to periodically update (the content) without building the entire site, saving time and reducing costs.

Routes (Pages or URLs)

At its core, Next.js uses file-based routing to define the app routes (URLs or pages for simplicity). This is in contrast to database-based routing that a traditional CMS like WordPress uses. That means you create folders and files to define the app routes.

Say, you want a contact page that's accessible via the example.com/contact slug, this is how it'd be done in the Next.js App Router:

app/contact/page.tsx or app/contact/page.js if using JavaScript.

Here, app is the top-level folder inside the project's root directory, This is where all routes are defined if the Next.js project is configured to use the default directory structure (that is, not using the src directory or such).

Then, subsequent folders like contact inside the app folder define the app's routes that would be accessible as URLs. Inside each route folder, a page.tsx or page.js file default exports a React component or UI. This React component or UI usually contains the page contents, such as headings, paragraphs, images, buttons, and stuff like that.

Here's an illustrative example of app/contact/page.tsx:

export default function Page() {
  return (
    <section>
      <h1>Lorem Ipsum</h1>

      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
        laudantium dolorem ullam alias dicta dolor.
      </p>
    </section>
  );
}

Layouts

A layout is a shared piece of UI across the site. Common examples include the site header, footer, and navigation menus. Typically, you'd create these once and reuse them across all pages of the site.

In Next.js, you create a layout by default exporting a React component from the special layout file. This layout file accepts a children prop to render a page, another layout, or a special file (e.g., error.js or loading.js).

Below is a simple example for app/layout.tsx:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

Caching

You might have heard that web development has its hard parts, and one of them is cache invalidation. Next.js takes care of that part without you worrying about how to implement complex cache mechanisms in the app.

Out-of-the-box, Next.js comes configured with optimal cache settings suitable for most websites. It does so by efficiently caching most of the stuff under the hood, such as the Fetch API calls, data, routes, rendering components, and more.

If you're interested, the official docs explore and illustrate in detail how caching mechanisms work in a default Next.js app and how you can configure or opt out of them should you need to.

Performance and Optimization

Next.js comes with various optimization defaults so you can focus on creating great web apps and not get stuck in the process of manual optimization. It offers several built-in APIs and components that help you offload the manual task of optimization.

For example, you've probably seen Google PageSpeed Insights recommending modern image formats like WebP. Thanks to Next's Image component, you don't have to deal with such issues anymore. Simply pick the image you want to use, and the Image component will automatically and efficiently optimize it (e.g., preloading, resizing, quality, format, and more).

Furthermore, you don't have to manually download and optimize Google Fonts anymore as you can leverage the built-in Font component for that. It allows self-hosting Google Fonts locally, reducing network requests and bandwidth usage. In addition, you can specify various font options, such as display, preload, fallback, and more.

And this is just scratching the surface! There are more optimization features — lazy loading, strategically loading third-party scripts (e.g., Google Analytics), efficiently serving videos, and more.

Wrapping Up

And that's a wrap for today! ✨

Next.js is a widely adopted, production-grade JavaScript framework that shines by solving various development challenges and addressing repetitive code patterns that often surface with vanilla React. It does so by abstracting away the low-level coding complexities and implementing common web features, such as caching, routing, optimization, and more. 🚀

In addition, it offers powerful features like Incremental Static Regeneration that accelerate and simplify the website development and deployment process. ⚡

And while it's an opinionated framework, it's for good reasons as it helps bring developers to the same page without worrying about different coding styles and approaches, while still giving enough flexibility in the choice of tools and technologies as needed.

What kinds of websites and apps have you built with Next.js and how has it served you so far? Let me know via email at [email protected] or on Mastodon at @danialzahid! 🙂