2.7 Catch All

Author: serranoarevalo

pages/index.js

@@ -5,15 +5,7 @@ import Seo from "../components/Seo";
 export default function Home({ results }) {
   const router = useRouter();
   const onClick = (id, title) => {
-    router.push(
-      {
-        pathname: `/movies/${id}`,
-        query: {
-          title,
-        },
-      },
-      `/movies/${id}`
-    );
+    router.push(`/movies/${title}/${id}`);
   };
   return (
     <div className="container">
@@ -26,15 +18,7 @@ export default function Home({ results }) {
         >
           <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} />
           <h4>
-            <Link
-              href={{
-                pathname: `/movies/${movie.id}`,
-                query: {
-                  title: movie.original_title,
-                },
-              }}
-              as={`/movies/${movie.id}`}
-            >
+            <Link href={`/movies/${movie.original_title}/${movie.id}`}>
               <a>{movie.original_title}</a>
             </Link>
           </h4>

pages/movies/[...params].js

@@ -0,0 +1,21 @@
+import Seo from "../../components/Seo";
+import { useRouter } from "next/router";
+
+export default function Detail({ params }) {
+  const router = useRouter();
+  const [title, id] = params || [];
+  return (
+    <div>
+      <Seo title={title} />
+      <h4>{title}</h4>
+    </div>
+  );
+}
+
+export function getServerSideProps({ params: { params } }) {
+  return {
+    props: {
+      params,
+    },
+  };
+}