Fix docs (#268)

lxsmnsyc · web-flow · commit 653eca4b6436 · 2025-02-19T14:48:52.000+08:00
diff --git a/docs/installation/next-js-app-router.md b/docs/installation/next-js-app-router.md
@@ -26,8 +26,9 @@ Create a `<ReactScan>` client component:
 ```jsx
 // path/to/ReactScanComponent
 "use client";
-import { JSX, useEffect } from "react";
+// react-scan must be imported before react
 import { scan } from "react-scan";
+import { JSX, useEffect } from "react";
 
 export function ReactScan(): JSX.Element {
   useEffect(() => {
@@ -43,6 +44,9 @@ export function ReactScan(): JSX.Element {
 Import the `<ReactScan>` component into `app/layout`:
 
 ```jsx
+// app/layout
+
+// This component must be the top-most import in this file!
 import { ReactScan } from "path/to/ReactScanComponent";
 
 // ...
@@ -51,7 +55,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <ReactScan />
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body>
         {children}
       </body>
     </html>
diff --git a/docs/installation/next-js-page-router.md b/docs/installation/next-js-page-router.md
@@ -30,10 +30,11 @@ export default function Document() {
 Add the following code to your `App` component in `pages/_app`:
 
 ```jsx
+// react-scan must be the top-most import
+import { scan } from "react-scan";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { useEffect } from "react";
-import { scan } from "react-scan";
 
 export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
diff --git a/docs/installation/tanstack-start.md b/docs/installation/tanstack-start.md
@@ -36,6 +36,7 @@ Add the following code to your `<RootDocument>` component at `app/routes/__root`
 
 ```jsx
 // app/routes/__root.jsx
+// react-scan must be imported before React and TanStack Start
 import { scan } from "react-scan";
 import { Meta, Scripts } from "@tanstack/start";
 import { useEffect } from "react";
