I tried to catch Next.js contradicting itself. It never did.
DEV Community

I tried to catch Next.js contradicting itself. It never did.

This is a submission for the Sanity Challenge, Path One: Ship an Agent That Queries Real Content

What I Built

Next.js has two routers. The Pages Router and the App Router answer the same questions in incompatible ways, and both sets of documentation are live, indexed, and correct.

Neither page carries a banner saying "this is the old way." Search does not tell you which one you landed on. So an AI assistant or an old tutorial hands you getServerSideProps, you paste it into an App Router project, and Next.js rejects it. The answer was not wrong. It was for the other router.

Router Rosetta takes a snippet or a question, identifies which router it belongs to, and gives you the equivalent in the other one. Every claim carries the documentation entry it came from, and every equivalence carries a citation to the official migration guide.

It also refuses. If the knowledge base does not cover something, it says so rather than filling the gap from the model's memory of Next.js.

Demo

Live: https://router-rosetta.vercel.app

Paste code, or use one of the four examples on the page.

It translates, with receipts

Given this:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts')
  return {props: {posts: await res.json()}}
}

It answers:

This code uses Pages Router, as identified by the use of getServerSideProps [data_fetching/pages_static].

In the App Router, getServerSideProps is replaced by fetching data directly inside an async Server Component page [migration, data_fetching/app_router].

In the App Router, fetch calls inside Server Components run on the server during rendering [data_fetching/app_router], mapping to getServerSideProps dynamic request behavior [migration].

Then it writes the App Router version, citing the target entry and the migration guide for the equivalence.

It refuses, with partial credit

Ask it something out of scope:

How do I configure Redis session storage with a custom Kubernetes ingress in Next.js?

The knowledge base does not contain information on configuring Redis session storage or custom Kubernetes ingress routing in Next.js. The only Kubernetes and deployment details supported by the knowledge base are:

  • Next.js supports deployment to Docker-compatible providers, including Kubernetes, using either a Node.js server or Docker container build [setup/configuration].
  • For Docker and containerized environments like Kubernetes, Next.js provides an output: "standalone" configuration mode in next.config.js to create a minimal production image containing only the required runtime files [setup/configuration].

Because Redis session storage and custom Kubernetes ingress configurations are not covered in the knowledge base, no router-specific mapping or implementation code can be provided.

Code

ajipelumi / router-rosetta

Router Rosetta

Translates Next.js code and questions between the Pages Router and the App Router, citing a knowledge base entry for every claim.

Paste getServerSideProps and it tells you this is Pages Router code, gives you the async Server Component equivalent, and cites the docs entry behind each statement. Ask "how do I read search params in each router?" and it answers for both.

Every factual claim carries a citation chip - the point is that you can check the answer rather than trust it.

The model is

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.