End of part 9

Author: codinginflow

src/app/(SSR)/topics/[topic]/TopicPage.module.css

@@ -0,0 +1,5 @@
+.image {
+    object-fit: cover;
+    margin: 0.25rem;
+    border-radius: 4px;
+}

src/app/(SSR)/topics/[topic]/page.tsx

@@ -0,0 +1,52 @@
+import { UnsplashImage } from "@/models/unsplash-image";
+import Image from "next/image";
+import styles from "./TopicPage.module.css";
+import { Alert } from "@/components/bootstrap";
+import { Metadata } from "next";
+
+// export const revalidate = 0;
+
+// export const dynamicParams = false;
+
+interface PageProps {
+    params: { topic: string },
+    // searchParams: { [key: string]: string | string[] | undefined },
+}
+
+export function generateMetadata({ params: { topic } }: PageProps): Metadata {
+    return {
+        title: topic + " - NextJS 13.4 Image Gallery",
+    }
+}
+
+export function generateStaticParams() {
+    return ["health", "fitness", "coding"].map(topic => ({ topic }));
+}
+
+export default async function Page({ params: { topic } }: PageProps) {
+    const response = await fetch(`https://api.unsplash.com/photos/random?query=${topic}&count=30&client_id=${process.env.UNSPLASH_ACCESS_KEY}`);
+    const images: UnsplashImage[] = await response.json();
+
+    return (
+        <div>
+            <Alert>
+                This page uses <strong>generateStaticParams</strong> to render and cache static pages at build time, even though the URL has a dynamic parameter.
+                Pages that are not included in generateStaticParams will be fetched & rendered on first access and then <strong>cached for subsequent requests</strong> (this can be disabled).
+            </Alert>
+
+            <h1>{topic}</h1>
+            {
+                images.map(image => (
+                    <Image
+                        src={image.urls.raw}
+                        width={250}
+                        height={250}
+                        alt={image.description}
+                        key={image.urls.raw}
+                        className={styles.image}
+                    />
+                ))
+            }
+        </div>
+    );
+}

src/app/NavBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Navbar, Nav, Container } from "react-bootstrap";
+import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
 import { usePathname } from "next/navigation";
 
 export default function NavBar() {
@@ -19,6 +19,11 @@ export default function NavBar() {
                         <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.Link as={Link} href="/isr" active={pathname === "/isr"}>ISR</Nav.Link>
+                        <NavDropdown title="Topics" id="topics-dropdown">
+                            <NavDropdown.Item as={Link} href="/topics/health">Health</NavDropdown.Item>
+                            <NavDropdown.Item as={Link} href="/topics/fitness">Fitness</NavDropdown.Item>
+                            <NavDropdown.Item as={Link} href="/topics/coding">Coding</NavDropdown.Item>
+                        </NavDropdown>
                     </Nav>
                 </Navbar.Collapse>
             </Container>