Update nextjs.mdx (#945)

SokratisVidros · S3Prototype · web-flow · commit da897a60ee85 · 2024-04-24T10:43:18.000-05:00
Co-authored-by: Shaquil Hansford &lt;liuqahs15@gmail.com&gt;
diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx
@@ -78,54 +78,10 @@ The final result should resemble the following:
 
   </InjectKeys>
 
-### Add `<ClerkProvider>` to your app
-
-All Clerk hooks and components must be children of the [`<ClerkProvider>`](/docs/components/clerk-provider) component, which provides active session and user context.
-
-Select your preferred router to learn how to make this data available across your entire app:
-
-<Tabs type="router" items={["App Router", "Pages Router"]}>
-  <Tab>
-  ```tsx filename="app/layout.tsx" {1,10-14}
-  import { ClerkProvider } from '@clerk/nextjs'
-  import './globals.css'
-
-  export default function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode
-  }) {
-    return (
-      <ClerkProvider>
-        <html lang="en">
-          <body>{children}</body>
-        </html>
-      </ClerkProvider>
-    )
-  }
-  ```
-  </Tab>
-
-  <Tab>
-  ```tsx filename="pages/_app.tsx" {2,6-8}
-    import '@/styles/globals.css'
-    import { ClerkProvider } from "@clerk/nextjs/server";
-    import type { AppProps } from "next/app";
-    function MyApp({ Component, pageProps }: AppProps) {
-      return (
-        <ClerkProvider {...pageProps}>
-          <Component {...pageProps} />
-        </ClerkProvider>
-      );
-    }
-    export default MyApp;
-  ```
-  </Tab>
-</Tabs>
-
 ### Add Middleware to your application
 
-`clerkMiddleware()` grants you access to user authentication state throughout your application, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add `clerkMiddleware()` to your application, follow these steps:
+[`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware#clerk-middleware) grants you access to user authentication state throughout your application, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add `clerkMiddleware()` to your application, follow these steps:
+
 
 1. Create a `middleware.ts` file. Your `middleware.ts` file should be placed inside the root directory alongside `.env.local`, or inside the `src/` directory if you are using it.
 2. In your middleware.ts, export Clerk's `clerkMiddleware()` helper:
@@ -140,7 +96,9 @@ Select your preferred router to learn how to make this data available across you
   ```
 3. By default, `clerkMiddleware()` will not protect any routes. All routes are public and you must opt-in to protection for routes. See the [`clerkMiddleware()` reference](/docs/references/nextjs/clerk-middleware) to learn how to require authentication for specific routes.
 
-### Create a header with Clerk components
+### Add `<ClerkProvider>` and components to your app
+
+All Clerk hooks and components must be children of the [`<ClerkProvider>`](/docs/components/clerk-provider) component, which provides active session and user context.
 
 You can control which content signed in and signed out users can see with Clerk's [prebuilt components](/docs/components/overview). To get started, create a header for your users to sign in or out. To do this, you will use:
 
@@ -149,8 +107,10 @@ You can control which content signed in and signed out users can see with Clerk'
 - [`<UserButton />`](/docs/components/user/user-button): A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
 - [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal.
 
+Select your preferred router to learn how to make this data available across your entire app:
+
 <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-```tsx filename="app/layout.tsx" {13-20}
+```tsx filename="app/layout.tsx" {10,13-20}
 import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import './globals.css';
 
@@ -180,7 +140,7 @@ export default function RootLayout({
   )
 }
 ```
-```tsx filename="pages/_app.tsx" {8-15}
+```tsx filename="pages/_app.tsx" {7-15}
 import '@/styles/globals.css'
 import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import type { AppProps } from 'next/app'
