What’s Different? Comparing the Router in Next.js App API, Next.js Pages API, Remix, and RedwoodJS

Right now, there are a few key players in the React space: Next.js, Remix, and RedwoodJS.

If I stack them next to each other, there are a few key differences. It’s helpful to recognize these, so you can make informed decisions about the tooling and your developer experience.

Let’s start with the obvious, they’re all running React. I know some people want to equate Next.js with React, but they are two separate things. Historically, React is considered the frontend layer that provides REACTivity within the browser.

React aside, the key differences lie in the router and how we fetch and interact with data. – and that’s really all a framework is, right?! Delivering pages and serving data.

So, let’s break these down and look at specific code examples.

The Router

Next.js

Next.js has two different options, depending on whether you’re using the pages API or the app API.

The pages API is older, but is more stable and well documented.

It uses a file based routing structure. Meaning, any file placed within the pages directory will get turned into a route. For example, pages/about.js gives you access to /about within the browser. If you want a “nested route,” such as /about/team, then you could simply add an about folder, with a team.js file inside.

✏

In this example, I also moved about.js into the about folder and renamed the file to index.js. Both /pages/about.js and /pages/about/index.js resolve to /about