Next.JS 404 Sayfası Hk. Yardım

Herkese merhaba, next.js öğrenmeye başladım. Hatta bir projeye hayat verdim sayılır. Son kontrolleri yaparken bir şey dikkatimi çekti.

[city]/page.tsx sayfam mevcut, lakin gelen değer json içinde yoksa 404 döndürmem gerekiyor. Sayfaya gittiğimde veyahut curl ile get attığımda 200 döndürüyor. (404 sayfasını basmasına rağmen)
dev 'de ve build & start 'da da aynı sonucu veriyor. Bir yerde bir şey kaçırıyorum ama sebebini bulamadım. Ufak bir yardım alabilir miyim acaba?

// src/app/not-found.tsx dosyası
import Image from "next/image";
import Link from "next/link";
import {Metadata} from "next";

export const metadata : Metadata = {
    title: 'Sayfa Bulunamadı',
    //...
}

export default async function NotFound() {
    return (
        <section id="blogdetay">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <h1 className="adi">Sayfa Bulunamadı</h1>
                        <Image width={856} height={468} src="/img/404.svg" alt="404" className="w-100" loading="eager"/>
                        <Link href="/" className="btn btn-yesil w-100">Anasayfa</Link>
                    </div>
                </div>
            </div>
        </section>
    );
}

genereteMetadata için ve CityPage için 2 farklı şehir sorgusu yapmam bile belki hatalı, ona da bir anlam ve çözüm bulamadım. Hatta genereteMetadata yapmadan page title dahi gelmiyor, "localhost/asd" gibi link yazıyor. O konuna da fikrinize açığım

// src/app/[city]/page.tsx dosyam
import PrintButton from "@/components/ui/PrintButton";
import cities from "@/data/cities.json";
import { Metadata } from "next";
import Link from "next/link";
import { notFound } from 'next/navigation';

interface Props {
    params: Promise<{
        city: string;
    }>;
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { city: slug } = await params;
    const cityJson = cities.find(c => c.slug === slug);
    if (!cityJson) {
        return {
            title: 'Sayfa Bulunamadı',
        };
    }
//...
}
export default async function CityPage({ params }: Props) {
    const { city: slug } = await params;
    const cityJson = cities.find(c => c.slug === slug);
    if(!cityJson){
        return notFound();
    }
//...
}

Sorunu çözdüm. loading.tsx 'den kaynaklanıyormuş. Component içinde loading oluşturarak 200 dönmesinin önüne geçtim.