File-based 
routing, 
without 
Next.js?
Tags:
  • React
  • Routing
  • Tanstack
  • Vite
  • Rollup

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].

Affiliate Links

Fastmail

Game-changer for managing multiple email accounts in one place. New users get 10% off!

Code: 7aa3c189

Tangem wallet

Secure hardware wallet for crypto assets. Get 10% discount on your first purchase!

Code: ZQ6MMC

1Password

The best password manager I've used. Secure, easy to use, and saves countless hours.

Freedom24

Invest safely and get a free stock up to 700€ when you open an account!

Code: 2915527

Betterstack

The best way to view logs and errors. Get 10% off your first month!

Code: b-e5zf

ClickUp

The best way to manage your tasks and projects. Get 10% off your first month!

Hetzner

Solid cloud infra, great support, and a great price. Receive €20 in cloud credits.

Code: 3UskohfB0X36

Using these referral links helps support my work. I only recommend products I use and trust. Thank you for your support!