End of part 7

Author: codinginflow

src/app/(SSR)/dynamic/page.tsx

@@ -0,0 +1,41 @@
+import { UnsplashImage } from "@/models/unsplash-image";
+import Image from "next/image";
+import Link from "next/link";
+import { Alert } from "@/components/bootstrap";
+
+export const metadata = {
+    title: "Dynamic Fetching - NextJS 13.4 Image Gallery",
+}
+
+export const revalidate = 0;
+
+export default async function Page() {
+    const response = await fetch("https://api.unsplash.com/photos/random?client_id=" + process.env.UNSPLASH_ACCESS_KEY,
+        {
+            // cache: "no-cache"/"no-store"
+            // next: { revalidate: 0 }
+        }
+    );
+    const image: UnsplashImage = await response.json();
+
+    const width = Math.min(500, image.width);
+    const height = (width / image.width) * image.height;
+
+    return (
+        <div className="d-flex flex-column align-items-center">
+            <Alert>
+                This page <strong>fetches data dynamically</strong>.
+                Every time you refresh the page, you get a new image from the Unsplash API.
+            </Alert>
+
+            <Image
+                src={image.urls.raw}
+                width={width}
+                height={height}
+                alt={image.description}
+                className="rounded shadow mw-100 h-100"
+            />
+            by <Link href={"/users/" + image.user.username}>{image.user.username}</Link>
+        </div>
+    );
+}

src/app/static/page.tsx src/app/(SSR)/static/page.tsxsrc/app/static/page.tsx renamed to src/app/(SSR)/static/page.tsx

@@ -17,6 +17,7 @@ export default function NavBar() {
                 <Navbar.Collapse id="main-navbar">
                     <Nav>
                         <Nav.Link as={Link} href="/static" active={pathname === "/static"}>Static</Nav.Link>
+                        <Nav.Link as={Link} href="/dynamic" active={pathname === "/dynamic"}>Dynamic</Nav.Link>
                     </Nav>
                 </Navbar.Collapse>
             </Container>