dev-resources.site

for different kinds of informations.

Routing in React vs. Next.js: Extra Work or Easy Wins?

Published at

9/22/2024

React Routing: More Work, More Control

React, being a library and not a full-fledged framework, gives you all the control—and by that, I mean all the work. If you’re using React Router (the go-to routing library for React apps), be prepared to define everything yourself.

Example: A Simple React Router Setup

// App.tsx
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

If you’re familiar with this setup, you know that with great power comes great boilerplate. React Router allows you to define your paths, components, and nested routes manually. You’ll need to set up the <Router> component around your app and manage routes and links manually.

What do you get? Flexibility. You can configure everything exactly how you want it. Want dynamic routes? Go ahead. Need nested routing? You got it. Want to feel like you’re writing routing code until the end of time? Absolutely!

Next.js: Routing That Just Works

Next.js, being a framework, takes away much of that boilerplate. It handles routing automatically based on the file structure. Yes, you read that right: no <Router> component, no manually defining paths. Just create a folder structure, and Next.js will handle the rest. You’ll even get built-in optimizations, SSR (Server-Side Rendering), and all the cool stuff.

Example: Next.js App Router

In Next.js, especially with the App Router, routing has been further streamlined. Here’s how you can define routes with minimal code:

// app/page.tsx (This is the homepage route)
export default function Home() {
  return <h1>Welcome to the homepage!</h1>;
}

// app/about/page.tsx (This is the about page route)
export default function About() {
  return <h1>About Us</h1>;
}

That’s it. No router setup required—Next.js takes care of it under the hood. Want to add dynamic routes? Just name your files with square brackets:

// app/products/[id]/page.tsx (Dynamic route)
export default function Product({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}

Key Features of Next.js' App Router

File-based routing: The file/folder structure drives the routes. If it's in the app/ directory, it's a route.
Dynamic routes: Easy as naming a file [id]/page.tsx.
Layouts and templates: With App Router, you can now have layouts and templates that allow for reusable components across different routes.

For example, having a layout.tsx file in any folder will apply that layout to all routes within that folder.

// app/layout.tsx (Shared layout for all pages)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>/* navigation */</nav>
        {children}
      </body>
    </html>
  );
}

Summarizing the Key Differences Between React and Next.js Routing

Now that we’ve seen some code, let’s talk about the differences between these two approaches. While React Router gives you full control, Next.js routing is about developer productivity.

Feature	React Router (React)	Next.js (App Router)
Router Setup	Requires `<Router>` and manual setup	Automatic based on folder structure
Dynamic Routing	Manual with `<Route>` and path parameters	Automatic with file naming conventions
Nested Routes	Defined manually in JSX	Inferred from folder structure
Layouts	Manual, not built-in	Built-in with `layout.tsx` files
Data Fetching	Handled separately (useEffect, SWR, etc.)	Built-in with Next.js API routes or Server Components
SEO Optimization	Custom configuration required	Automatic SEO and performance enhancements
SSR/SSG	Not built-in, requires additional libraries	Fully supported out of the box

Which One Should You Use?

If you want full control and don’t mind handling every detail, React Router is for you. It’s like cooking from scratch—labor-intensive but rewarding.
If you want a routing system that just works out of the box, Next.js is your best friend. Why reinvent the wheel when you can have a Tesla? Especially with Next.js, App Router streamlines development like never before.

Conclusion: The Verdict

So, React Router gives you control, but at what cost? Boilerplate. And let's face it, managing routes manually is so 2015. With Next.js, especially the new App Router, routing is simplified to the point where you can focus more on building your app, not wiring it up.

In other words, Next.js is like hiring someone to do your grocery shopping while you relax—React Router, on the other hand, is you, standing in line with a full cart wondering why you decided to make a ten-course meal from scratch.

The choice is yours, but with Next.js, the scales are tipping heavily towards effortless productivity.

Connect with me on LinkedIn and X

routing Article's

30 articles in total

Mastering Nested Navigation in Flutter with `go_router` and a Bottom Nav Bar