Route-based code splitting and bundling

Let’s begin by defining a route in a general web application context and then in a Next.js context.

In a web application, a route comes from the router concept; in simple terms, it’s an entry in the router. An entry in the router mechanism can take multiple shapes – for example, in an nginx/Apache/Caddy web server setup, we can have a path to file forwarding or a wildcard forwarding approach. In backend MVC frameworks such as Ruby on Rails, Laravel (PHP), and Django (Python), a route associates a request path to the specific code to be run. The request path to code to be run concept also applies to Node.js backend applications using libraries such as Express, Koa, Fastify, and Adonis.js.

Let’s now see how the route concept is used in the Next.js filesystem router.

A minimal Next.js project as initialized with create-next-app is laid out as follows. Each file in the pages directory corresponds to a route. For...