Can anyone see what I'm doing wrong here?

When I'm using npm run dev everything works fine and the correct content is loaded under my URLs so I know the routing setup and API all works ok.

But it seems like my dynamic routes aren't being statically generated when I run npm run build.

// File: app/[[...segments]]/page.tsx

// Statically generated pages only
export const dynamicParams = false;

export async function generateStaticParams() {
    return [
        { }, // http://localhost:3000/
        { segments: ['about'] } // http://localhost:300/about
    ];
}

export default async function Page({ params }: Props) {
    
    const {segments} = await params;

    let slug = 'index';

    // Get the slug string from "segments"
    if (segments && segments.length > 0) {
        slug = segments.join('/');
    }

    // This fetches the page details from my API using the slug
    // The API is an expressJs app running locally and is up and running
    const pageDetails = await getPageBySlug(slug);

    // Render page details below
}

The URLs I'm trying to statically generate are:

http://localhost:3000/
http://localhost:300/about

When I run the build command, i'd expect to see my API receiving calls from getPageBySlug as NextJS pre-generates each page, but this doesn't happen. The output I see from NextJs is:

Route (app)                                 Size  First Load JS
┌ ○ /_not-found                            989 B         101 kB
└ ● /[[...segments]]                       162 B         105 kB
+ First Load JS shared by all            99.6 kB
  ├ chunks/4bd1b696-cf72ae8a39fa05aa.js  54.1 kB
  ├ chunks/964-7a34cadcb7695cec.js       43.5 kB
  └ other shared chunks (total)          1.97 kB


○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses generateStaticParams)

If I do npm run start and visit my app, the pages return 404 and I get Error: Internal: NoFallbackError in the console