updated redirects example for App router

vercel · Jun 20, 2024 · 593f35e · 593f35e
1 parent fc382a9
commit 593f35e
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 34 deletions.
diff --git a/examples/redirects/README.md b/examples/redirects/README.md
@@ -2,7 +2,7 @@
 
 This example shows how to use [redirects in Next.js](https://nextjs.org/docs/api-reference/next.config.js/redirects) to redirect an incoming request path to a different destination path.
 
-The index page ([`pages/index.tsx`](pages/index.tsx)) has a list of links that match the redirects 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.tsx)) has a list of links that match the redirects defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
 
 ## Deploy your own
 

diff --git a/examples/redirects/components/Code.tsx → examples/redirects/app/_components/Code.tsx b/examples/redirects/components/Code.tsx → examples/redirects/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;

diff --git a/examples/redirects/pages/about.tsx → examples/redirects/app/about/page.tsx b/examples/redirects/pages/about.tsx → examples/redirects/app/about/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import styles from "../styles.module.css";
+import styles from "../../styles.module.css";
 
 export default function About() {
   return (

diff --git a/examples/redirects/app/layout.tsx b/examples/redirects/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>
+  )
+}
diff --git a/examples/redirects/app/news/[...slug]/page.tsx b/examples/redirects/app/news/[...slug]/page.tsx
@@ -0,0 +1,27 @@
+"use client"
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import styles from "../../../styles.module.css";
+import Code from "../../_components/Code";
+
+export default function News({ params }: Params) {
+  const pathname = usePathname()
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>Path: {pathname}</h1>
+        <hr className={styles.hr} />
+        <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>
+  );
+}
+type Params = {
+  params: {
+    slug: string;
+  };
+};
diff --git a/examples/redirects/pages/index.tsx → examples/redirects/app/page.tsx b/examples/redirects/pages/index.tsx → examples/redirects/app/page.tsx
@@ -1,21 +1,21 @@
 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() {
+export default function Home() {
   return (
     <div className={styles.container}>
       <div className={styles.card}>
-        <h1>Redirects with Next.js</h1>
+        <h1 className="text-white">Redirects with Next.js</h1>
         <hr className={styles.hr} />
         <p>
-          The links below are{" "}
+          The links below are{" "}custom
           <Link
             href="https://nextjs.org/docs/api-reference/next.config.js/redirects"
             legacyBehavior
           >
             <>
-              custom <Code>redirects</Code>
+               <Code>redirects</Code>
             </>
           </Link>{" "}
           that redirect an incoming request path to a different destination
@@ -51,4 +51,4 @@ export default function Index() {
       </div>
     </div>
   );
-}
+}
diff --git a/examples/redirects/pages/news/[...slug].tsx b/examples/redirects/pages/news/[...slug].tsx