add pages router code back

clerk · Dec 4, 2024 · aef22a2 · aef22a2
1 parent 28cfad3
commit aef22a2
Showing 1 changed file with 29 additions and 15 deletions.
diff --git a/docs/components/clerk-provider.mdx b/docs/components/clerk-provider.mdx
@@ -12,23 +12,37 @@ The recommended approach is to wrap your entire app with `<ClerkProvider>` at th
 
 <Tabs items={["Next.js", "React"]}>
   <Tab>
-    ```tsx {{ filename: 'app/layout.tsx' }}
-    import React from 'react'
-    import { ClerkProvider } from '@clerk/nextjs'
-
-    export default function RootLayout({ children }: { children: React.ReactNode }) {
-      return (
-        <html lang="en">
-          <head>
-            <title>Next.js 13 with Clerk</title>
-          </head>
+    <CodeBlockTabs options={["App Router", "Pages Router"]}>
+      ```tsx {{ filename: 'app/layout.tsx' }}
+      import React from 'react'
+      import { ClerkProvider } from '@clerk/nextjs'
+
+      export default function RootLayout({ children }: { children: React.ReactNode }) {
+        return (
           <ClerkProvider>
-            <body>{children}</body>
+            <html lang="en">
+              <body>{children}</body>
+            </html>
           </ClerkProvider>
-        </html>
-      )
-    }
-    ```
+        )
+      }
+      ```
+
+      ```tsx {{ filename: '_app.tsx' }}
+      import { ClerkProvider } from '@clerk/nextjs'
+      import type { AppProps } from 'next/app'
+
+      function MyApp({ Component, pageProps }: AppProps) {
+        return (
+          <ClerkProvider {...pageProps}>
+            <Component {...pageProps} />
+          </ClerkProvider>
+        )
+      }
+
+      export default MyApp
+      ```
+    </CodeBlockTabs>
   </Tab>
 
   <Tab>