File-based routing, without Next.js?

Introduction

Next.js is a very popular React framework that is often used to build full-stack web applications. It is known for its server-side rendering capabilities, static site generation, and developer experience.

However, the top reason people use Next.js (according to the people I have spoken with) is by far, file-based routing.

In this short article, we will discuss whether people should be using Next.js for file-based routing or they can achieve the same results with other tools.

File-based routing

File-based routing is the idea that the structure of your project's file system should mirror the structure of your application's routes. It's a very intuitive way to organize your code and it makes it easy to reason about the flow of your application, especially as it grows in size. Your file system becomes the source of truth for your application's routes, and you don't need to worry about setting up complex routing configurations. Even better, you have a clear mental model on your deeply nested routes or dynamic routes.

Next.js has built-in support for file-based routing, which is one of the reasons why it is so popular. When you create a new page in a Next.js project, you simply create a new file in the pages or app directory, and Next.js automatically sets up the route for you, assuming you follow the rules and export the correct components.

Let's discuss the alternatives

While file-based routing is a great feature of Next.js, it is not unique to Next.js. Something very interesting came to my attention recently, and that is the Tanstack file-based Router. This package is a Vite plugin that allows you to create file-based routes in your React application, without the need for a framework like Next.js. In essence, it provides a watch mode that generates a route tree based on the files in your project's routes directory.

Let's see an example

First, create a brand new Vite project (make sure to pick React as your library of choice):

pnpm create vite@latest vite-app

Then, install the @tanstack/router-vite-plugin package:

pnpm add @tanstack/router-vite-plugin

Next, to enable the Vite plugin, add it to your vite.config.ts file:

// vite.config.ts
import { defineConfig } from 'vite';
import { TanStackRouterVite } from '@tanstack/router-vite-plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...,
    TanStackRouterVite(),
  ],
});

With the plugin enabled, Vite will now watch your configured routesDirectory and generate your route tree whenever a file is added, removed, or changed.

Now, create an empty file in the src/routes directory and save it. Because we have a file watcher watching the routes directory, the plugin will generate a simple component for you out of the box. For the next steps you can modify the generated component to your liking.

Naming conventions

If you're curious on how the plugin generates the components, it follows a simple naming convention which can be found in the documentation. By using this convention, you can create nested routes, dynamic routes, and even catch-all routes.

Conclusion

File-based routing is a powerful feature that can make your codebase more organized and easier to maintain. While Next.js is a great framework that provides built-in support for file-based routing, it is not the only tool that can help you achieve this. The Tanstack file-based Router is a great alternative that allows you to create file-based routes in your React application without the need for a full-fledged framework like Next.js.

If you are looking for a lightweight solution that gives you the flexibility to organize your code the way you want, the Tanstack file-based Router might be the right choice for you.

I hope you found this article helpful. If you have any questions or comments, feel free to send me an email at [email protected].