Next.js vs Remix — Routing Contrast and File Conventions

In this tutorial, you will learn about Next.js vs Remix. We cover key concepts, practical examples, and best practices to help you master this topic.

Both Next.js and Remix use file-system routing, but their conventions for layouts, nested routes, dynamic segments, and route organization differ significantly.

What You'll Learn

You will understand the routing syntax and conventions in Next.js (both Pages and App Router) and Remix, including dynamic segments, layouts, and route groups.

Why It Matters

Routing is the foundation of your application structure. Understanding each framework's routing model prevents confusion and helps you organize code effectively.

Real-World Use

DodaTech's tutorial platform uses Next.js App Router with route groups for marketing and dashboard sections. An internal tool uses Remix nested routes for complex form wizards.

flowchart LR
    subgraph Next[Next.js Routing]
        A1[pages/] --> B1[File-based]
        A2[app/] --> C1[Folder-based]
        A3[layout.js] --> C1
        A4[route groups] --> C1
    end
    subgraph Remix[Remix Routing]
        B1[routes/] --> B2[Flat files]
        B2 --> B3[Nested folders]
        B3 --> B4[Automatic layouts]
    end
    style Next fill:#121212,color:#fff
    style Remix fill:#1a1a2e,color:#fff

Next.js Pages Router Routing

The Pages Router uses file names to define routes. Each file in pages/ becomes a route.

// pages/index.js → /
// pages/about.js → /about
// pages/blog/[slug].js → /blog/:slug
// pages/blog/[...slug].js → /blog/:slug*
// pages/2026/[month]/[day].js → /2026/:month/:day

Dynamic segments use square brackets. Catch-all routes use [...param]. Optional catch-all uses [[...param]].

Next.js App Router Routing

The App Router uses folders with special files. Each folder represents a route segment.

// app/page.js → /
// app/about/page.js → /about
// app/blog/[slug]/page.js → /blog/:slug
// app/blog/[...slug]/page.js → /blog/:slug*
// app/(marketing)/page.js → / (route group)
// app/dashboard/layout.js → Layout for dashboard routes
// app/dashboard/loading.js → Loading UI for dashboard
// app/dashboard/error.js → Error boundary for dashboard

The App Router introduces special files: layout.js, loading.js, error.js, not-found.js, and template.js for different concerns.

Remix Routing

Remix uses the routes/ directory with a flat or nested file convention.

// app/routes/_index.jsx → /
// app/routes/about.jsx → /about
// app/routes/blog.$slug.jsx → /blog/:slug
// app/routes/blog.$.jsx → /blog/*
// app/routes/dashboard.jsx → /dashboard
// app/routes/dashboard.settings.jsx → /dashboard/settings
// app/routes/dashboard._index.jsx → /dashboard (nested)

Remix uses dots for nesting, $ for dynamic segments, and _ for layout routes. Optional segments use $slug? syntax.

Layout Comparison

Next.js App Router layouts persist across navigations and can be nested. Each layout file wraps its child routes.

Remix layouts are defined by parent route files. If a route file exports a component and a loader, it becomes a layout for routes nested underneath it. This is automatic and requires no additional configuration.

Common Mistakes

1. Confusing Pages and App Router syntax: The App Router uses folders with page.js files, not file names. Do not mix the two patterns.

2. Forgetting layout.js in App Router: Without a layout.js, each page renders independently without shared chrome.

3. Misunderstanding Remix dot nesting: A file named dashboard.settings.jsx creates /dashboard/settings, not /dashboard.settings. The dot means nesting.

4. Not using route groups in App Router: Route groups in parentheses let you organize without affecting URLs. Use them for different sections.

5. Creating too-deep routes in either framework: Maximum recommended depth is 3-4 levels. Deep nesting hurts maintainability and performance.

Practice Questions

1. How does Next.js App Router define a route?

Each folder represents a route segment. The folder contains a page.js file that exports the page component.

2. How does Remix define a nested route?

Remix uses dots in filenames. dashboard.settings.jsx creates /dashboard/settings with dashboard.jsx as the parent layout.

3. What is the difference between [slug] in Next.js and $slug in Remix?

Both represent dynamic segments. Next.js uses square brackets. Remix uses dollar sign prefix.

4. How do layouts work in each framework?

Next.js uses layout.js files. Remix uses parent route files as automatic layouts for child routes.

5. What are route groups in Next.js App Router?

Folders in parentheses that organize routes without affecting the URL. Used for different layouts within the same URL space.

Challenge

Create the same multi-section application structure in both frameworks: a public section (home, about, blog) and an admin section (dashboard, settings, users). Compare the file structures.

Frequently Asked Questions

Mini Project

Create a documentation site with the same structure in both frameworks: a top-level layout with sidebar, nested category pages, and individual article pages with dynamic segments.

What's Next

Dive deeper into Pages vs Nested Routes and how each framework handles route composition.