From 69ff69412ecba13084d20cc31daaa4dfb9093d3f Mon Sep 17 00:00:00 2001
From: MatsDK <67562518+MatsDK@users.noreply.github.com>
Date: Tue, 12 Mar 2024 19:18:47 +0100
Subject: [PATCH] Add Next.js App Router to readme (#57)

* Add Next.js App Router to readme
---
 packages/trpc-playground/README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/trpc-playground/README.md b/packages/trpc-playground/README.md
index 08278b7..d124739 100644
--- a/packages/trpc-playground/README.md
+++ b/packages/trpc-playground/README.md
@@ -17,6 +17,29 @@ tRPC Playground provides handlers that serve the playground HTML page and handle
 <details>
 <summary>Next.js</summary>
 
+Next.js App Router
+
+```ts
+// src/app/api/trpc-playground/route.ts
+import { appRouter } from '@/server'
+import { fetchHandler } from 'trpc-playground/handlers/fetch'
+
+const setupHandler = fetchHandler({
+  router: appRouter,
+  trpcApiEndpoint: '/api/trpc',
+  playgroundEndpoint: '/api/trpc-playground',
+})
+
+const handler = async (req: Request) => {
+  const playgroundHandler = await setupHandler
+  return await playgroundHandler(req)
+}
+
+export { handler as GET, handler as POST }
+```
+
+Next.js Pages Router
+
 [Example](https://github.com/sachinraja/trpc-playground/tree/main/apps/next)
 
 ```ts