在專案的根目錄下建立 public\images 資料夾
找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片)

接著在 app\reviews\ 底下遊戲資料page 都加上圖片
編輯 app\reviews\hollow-knight\page.jsx 檔案內容如下(其他page比照辦理)

import Heading from "@/components/heading"

function HollowKnightPage() {
    return (
        <div>
            <Heading>Hollow Knight</Heading>
            <img src="/images/hollow-knight.jpg" alt="" width="640" height="360"
                className="mb-2 rounded" />
            <p>This will be the reviews for Hollow Knight</p>
        </div>
    )
}
export default HollowKnightPage

執行畫面1:

執行畫面2:

Image 卡片

編輯 app\reviews\page.jsx 檔案內容如下:

import Link from "next/link"
import Heading from "@/components/heading"
function ReviewsPage() {
    return (
        <div>
            <Heading>Reviews</Heading>
            <ul className="flex flex-col gap-3">
                <li className="border w-80 bg-white shadow hover:shadow-xl">
                    <Link href="/reviews/hollow-knight">
                        <img src="/images/hollow-knight.jpg" alt="" width="320" height="180"
                            className="rounded-t" />
                        <h2 className="text-center py-1">Hollow Knight</h2>
                    </Link>
                </li>
                <li className="border w-80 bg-white shadow hover:shadow-xl">
                    <Link href="/reviews/stardew-valley">
                        <img src="/images/stardew-valley.jpg" alt="" width="320" height="180"
                            className="rounded-t" />
                        <h2 className="text-center py-1">Stardew Valley</h2>
                    </Link>
                </li>
                <li className="border w-80 bg-white shadow hover:shadow-xl">
                    <Link href="/reviews/hellblade">
                        <img src="/images/hellblade.jpg" alt="" width="320" height="180"
                            className="rounded-t" />
                        <h2 className="text-center py-1">Hellblade</h2>
                    </Link>
                </li>
            </ul>
        </div>
    )
}

export default ReviewsPage

執行畫面:

今天是9/15，這兩天寫完10天的存檔，明天9/16是開賽期限的最後一天，希望這次可以順利地完成鐵人賽

大叔的鐵人賽第十天結束 :)