docs: Clarify how to use tRPC in Next.js Route Handlers

[joulev]

Closes #N/A

🎯 Changes

Make the example code clearer on how to use tRPC in Next.js App Router Route Handlers.

Why?

The existing example code is already correct, however it could cause some confusion, since it uses the const x = y => z syntax (which is not immediately clear that the function returns z especially for JavaScript beginners).

In the Next.js Discord server, there has been at least one help question where the user tries to do this

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@/server";

function handler(req: Request) {
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => ({}),
  });
}

export { handler as GET, handler as POST };

and it doesn't work because the returned value of fetchRequestHandler is not returned again.

This PR slightly improves the example code so that the need to re-return the value is made more apparent.

✅ Checklist

• I have followed the steps listed in the Contributing guide.
• If necessary, I have added documentation related to the changes made.
• I have added or updated the tests related to the changes made.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 19, 2024 8:21am

[vercel]

@joulev is attempting to deploy a commit to the trpc Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

This pull request has been locked because we are very unlikely to see comments on closed issues. If you think, this PR is still necessary, create a new one with the same branch. Thank you.