Example: Updated the example of rewrites to utilize the App Router (#69495)

This PR updates the rewrites example to use the App Router. Here are the
changes that have been made:

- Renamed the "pages" folder to the "app" folder.
- Updated the routing for /, /news/[...slug] & /about files to align
with the App Router.
- Added the layout.tsx file as part of the App Router.
- Updated the package.json file.
- Updated the Readme.md file

CC: @samcx

---------

Co-authored-by: samcx <[email protected]>

examples/rewrites/README.md

@@ -1,8 +1,8 @@
 # Rewrites Example
 
-This example shows how to use [rewrites in Next.js](https://nextjs.org/docs/api-reference/next.config.js/rewrites) to map an incoming request path to a different destination path.
+This example shows how to use [rewrites in Next.js](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites) to map an incoming request path to a different destination path.
 
-The index page ([`pages/index.js`](pages/index.js)) has a list of links that match the rewrites defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
+The index page ([`app/page.tsx`](app/page.ts)) has a list of links that match the rewrites defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
 
 ## Deploy your own
 

examples/rewrites/app/_components/Code.tsx

@@ -1,4 +1,4 @@
-import styles from "../styles.module.css";
+import styles from "../../styles.module.css";
 
 type CodeProps = {
   children: React.ReactNode;

examples/rewrites/app/about/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import styles from "../../styles.module.css";
+import Code from "../_components/Code";
+
+export default function About() {
+  const pathname = usePathname();
+  const [path, setPath] = useState<string | null>(null);
+
+  useEffect(() => {
+    setPath(pathname);
+  }, [pathname]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>Path: {path}</h1>
+        <hr className={styles.hr} />
+        <p>
+          {" "}
+          This page was rendered by <Code>{`app/about.js`}</Code>.
+        </p>
+        <Link href="/">&larr; Back home</Link>
+      </div>
+    </div>
+  );
+}

examples/rewrites/app/layout.tsx

@@ -0,0 +1,16 @@
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

examples/rewrites/app/news/[...slug]/page.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import styles from "../../../styles.module.css";
+import Code from "../../_components/Code";
+
+export default function News({ params }: any) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>{`Path: pages/${params.slug.join("/")}`}</h1>
+        <hr className={styles.hr} />
+        <p>
+          This page was rendered by <Code>{`app/news/[...slug]/page.js`}</Code>.
+        </p>
+        <p>
+          The query <Code>slug</Code> for this page is:{" "}
+          <Code>{JSON.stringify(params.slug)}</Code>
+        </p>
+        <Link href="/">&larr; Back home</Link>
+      </div>
+    </div>
+  );
+}

examples/rewrites/app/page.tsx

@@ -1,6 +1,6 @@
 import styles from "../styles.module.css";
 import Link from "next/link";
-import Code from "../components/Code";
+import Code from "./_components/Code";
 
 export default function Index() {
   return (
@@ -11,12 +11,12 @@ export default function Index() {
         <p>
           The links below are{" "}
           <Link
-            href="https://nextjs.org/docs/api-reference/next.config.js/rewrites"
+            href="https://nextjs.org/docs/app/api-reference/next-config-js/rewrites"
             legacyBehavior
           >
-            <>
+            <span>
               custom <Code>rewrites</Code>
-            </>
+            </span>
           </Link>{" "}
           that map an incoming request path to a different destination path.
         </p>

examples/rewrites/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/rewrites/package.json

@@ -7,13 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.5",
-    "@types/react": "^18.0.23",
-    "@types/react-dom": "^18.0.7",
-    "typescript": "^4.8.4"
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4"
   }
 }

examples/rewrites/pages/about.tsx

@@ -1,29 +0,0 @@
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-import styles from "../styles.module.css";
-import Code from "../components/Code";
-
-export default function About() {
-  const { asPath, route } = useRouter();
-  const [path, setPath] = useState<string | null>(null);
-
-  // `asPath` is always `/about` in Node.js (server render), because the page is statically generated
-  // so we wait for the browser to load, and use the updated `asPath`, which may be a path
-  // other than `/about` when using a rewrite. This way we can avoid a content mismatch
-  useEffect(() => setPath(asPath), [asPath]);
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <h1>Path: {path}</h1>
-        <hr className={styles.hr} />
-        <p>
-          {" "}
-          This page was rendered by <Code>{`pages${route}.js`}</Code>.
-        </p>
-        <Link href="/">&larr; Back home</Link>
-      </div>
-    </div>
-  );
-}

examples/rewrites/pages/news/[...slug].tsx

@@ -1,32 +0,0 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
-import styles from "../../styles.module.css";
-import Code from "../../components/Code";
-
-export default function News() {
-  const { asPath, route, query } = useRouter();
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <h1>Path: {asPath}</h1>
-        <hr className={styles.hr} />
-        <p>
-          This page was rendered by <Code>{`pages${route}.js`}</Code>.
-        </p>
-        <p>
-          The query <Code>slug</Code> for this page is:{" "}
-          <Code>{JSON.stringify(query.slug)}</Code>
-        </p>
-        <Link href="/">&larr; Back home</Link>
-      </div>
-    </div>
-  );
-}
-
-// Use SSR for this page as currently rewrites don't work with dynamic pages without SSR
-export async function getServerSideProps() {
-  return {
-    props: {},
-  };
-}

examples/rewrites/tsconfig.json

@@ -13,8 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }