Next.js Type Mismatch Fix

2025-06-218 turns34,159 charsgpt-4o

Summary

User was debugging a TypeScript type mismatch error in a Next.js application build process.

Messages

49:15 AM: build-image version: 235a96ed6c11cbdf942eed7e70e6802956f9b464 (focal)
49:15 AM: buildbot version: 5276eccdd060881dae1f6d00b54ef962dbbaa654
49:15 AM: Fetching cached dependencies
49:16 AM: Starting to download cache of 407.6MB (Last modified: 2025-06-21 15:40:43 +0000 UTC)
49:17 AM: Finished downloading cache in 1.908s
49:17 AM: Starting to extract cache
49:21 AM: Finished extracting cache in 3.668s
49:21 AM: Finished fetching cache in 5.632s
49:21 AM: Starting to prepare the repo for build
49:21 AM: Preparing Git Reference refs/heads/master
49:24 AM: Starting to install dependencies
49:24 AM: Started restoring cached mise cache
49:25 AM: Finished restoring cached mise cache
49:25 AM: mise python@3.13.5   install
49:25 AM: mise python@3.13.5   download cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
49:26 AM: mise python@3.13.5   extract cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
49:26 AM: mise python@3.13.5   python --version
49:26 AM: mise python@3.13.5   Python 3.13.5
49:26 AM: mise python@3.13.5 ✓ installed
49:26 AM: Python version set to 3.13
49:28 AM: Collecting pipenv
49:28 AM:   Downloading pipenv-2025.0.3-py3-none-any.whl.metadata (17 kB)
49:28 AM: Collecting certifi (from pipenv)
49:28 AM:   Downloading certifi-2025.6.15-py3-none-any.whl.metadata (2.4 kB)
49:28 AM: Collecting packaging>=22 (from pipenv)
49:28 AM:   Downloading packaging-25.0-py3-none-any.whl.metadata (3.3 kB)
49:28 AM: Collecting setuptools>=67 (from pipenv)
49:28 AM:   Downloading setuptools-80.9.0-py3-none-any.whl.metadata (6.6 kB)
49:28 AM: Collecting virtualenv>=20.24.2 (from pipenv)
49:28 AM:   Downloading virtualenv-20.31.2-py3-none-any.whl.metadata (4.5 kB)
49:28 AM: Collecting distlib<1,>=0.3.7 (from virtualenv>=20.24.2->pipenv)
49:28 AM:   Downloading distlib-0.3.9-py2.py3-none-any.whl.metadata (5.2 kB)
49:28 AM: Collecting filelock<4,>=3.12.2 (from virtualenv>=20.24.2->pipenv)
49:28 AM:   Downloading filelock-3.18.0-py3-none-any.whl.metadata (2.9 kB)
49:28 AM: Collecting platformdirs<5,>=3.9.1 (from virtualenv>=20.24.2->pipenv)
49:28 AM:   Downloading platformdirs-4.3.8-py3-none-any.whl.metadata (12 kB)
49:28 AM: Downloading pipenv-2025.0.3-py3-none-any.whl (2.9 MB)
49:28 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2.9/2.9 MB 51.0 MB/s eta 0:00:00
49:28 AM: Downloading packaging-25.0-py3-none-any.whl (66 kB)
49:28 AM: Downloading setuptools-80.9.0-py3-none-any.whl (1.2 MB)
49:28 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.2/1.2 MB 55.8 MB/s eta 0:00:00
49:28 AM: Downloading virtualenv-20.31.2-py3-none-any.whl (6.1 MB)
49:28 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6.1/6.1 MB 123.2 MB/s eta 0:00:00
49:28 AM: Downloading certifi-2025.6.15-py3-none-any.whl (157 kB)
49:28 AM: Downloading distlib-0.3.9-py2.py3-none-any.whl (468 kB)
49:29 AM: Downloading filelock-3.18.0-py3-none-any.whl (16 kB)
49:29 AM: Downloading platformdirs-4.3.8-py3-none-any.whl (18 kB)
49:29 AM: Installing collected packages: distlib, setuptools, platformdirs, packaging, filelock, certifi, virtualenv, pipenv
49:31 AM: Successfully installed certifi-2025.6.15 distlib-0.3.9 filelock-3.18.0 packaging-25.0 pipenv-2025.0.3 platformdirs-4.3.8 setuptools-80.9.0 virtualenv-20.31.2
49:31 AM: [notice] A new release of pip is available: 24.3.1 -> 25.1.1
49:31 AM: [notice] To update, run: pip install --upgrade pip
49:31 AM: Attempting Ruby version 2.7.2, read from environment
49:32 AM: Using Ruby version 2.7.2
49:33 AM: Started restoring cached go cache
49:33 AM: Finished restoring cached go cache
49:33 AM: go version go1.19.13 linux/amd64
49:33 AM: Using PHP version 8.0
49:34 AM: Started restoring cached Node.js version
49:36 AM: Finished restoring cached Node.js version
49:36 AM: v22.16.0 is already installed.
49:36 AM: Now using node v22.16.0 (npm v10.9.2)
49:36 AM: Enabling Node.js Corepack
49:36 AM: Started restoring cached build plugins
49:36 AM: Finished restoring cached build plugins
49:36 AM: Started restoring cached corepack dependencies
49:36 AM: Finished restoring cached corepack dependencies
49:36 AM: No npm workspaces detected
49:36 AM: Started restoring cached node modules
49:36 AM: Finished restoring cached node modules
49:36 AM: Installing npm packages using npm version 10.9.2
49:38 AM: added 6 packages, and audited 546 packages in 2s
49:38 AM: 277 packages are looking for funding
49:38 AM:   run `npm fund` for details
49:38 AM: found 0 vulnerabilities
49:38 AM: npm packages installed
49:39 AM: Successfully installed dependencies
49:39 AM: Starting build script
49:40 AM: Detected 1 framework(s)
49:40 AM: "next" at version "15.3.4"
49:40 AM: Section completed: initializing
49:43 AM: ​
49:43 AM: Netlify Build                                                 
49:43 AM: ────────────────────────────────────────────────────────────────
49:43 AM: ​
49:43 AM: ❯ Version
49:43 AM:   @netlify/build 33.4.6
49:43 AM: ​
49:43 AM: ❯ Flags
49:43 AM:   accountId: 66d1d0902d36e530c7d461d3
49:43 AM:   baseRelDir: true
49:43 AM:   buildId: 6856d47a45200a0008924080
49:43 AM:   deployId: 6856d47a45200a0008924082
49:43 AM: ​
49:43 AM: ❯ Current directory
49:43 AM:   /opt/build/repo
49:43 AM: ​
49:43 AM: ❯ Config file
49:43 AM:   No config file was defined: using default values.
49:43 AM: ​
49:43 AM: ❯ Context
49:43 AM:   production
49:43 AM: ​
49:43 AM: ❯ Using Next.js Runtime - v5.11.3
49:45 AM: Next.js cache restored
49:45 AM: ​
49:45 AM: Build command from Netlify app                                
49:45 AM: ────────────────────────────────────────────────────────────────
49:45 AM: ​
49:45 AM: $ npm run build
49:45 AM: > next-animated-portfolio@0.1.0 build
49:45 AM: > next build
49:46 AM:    ▲ Next.js 15.3.4
49:46 AM:    Creating an optimized production build ...
49:57 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
49:53 AM:  ✓ Compiled successfully in 3.0s
49:53 AM:    Linting and checking validity of types ...
49:56 AM: Failed to compile.
49:56 AM: 
49:56 AM: src/app/blog/[slug]/page.tsx
49:56 AM: Type error: Type 'PageProps' does not satisfy the constraint 'import("/opt/build/repo/.next/types/app/blog/[slug]/page").PageProps'.
49:56 AM:   Types of property 'params' are incompatible.
49:56 AM:     Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
49:56 AM: Next.js build worker exited with code: 1 and signal: null
49:56 AM: ​
49:56 AM: "build.command" failed                                        
49:56 AM: ────────────────────────────────────────────────────────────────
49:56 AM: ​
49:56 AM:   Error message
49:56 AM:   Command failed with exit code 1: npm run build
49:56 AM: ​
49:56 AM:   Error location
49:56 AM:   In Build command from Netlify app:
49:56 AM:   npm run build
49:56 AM: ​
49:56 AM:   Resolved config
49:56 AM:   build:
49:56 AM:     command: npm run build
49:56 AM:     commandOrigin: ui
49:56 AM:     environment:
49:56 AM:       - STRIPE_SECRET_KEY
49:56 AM:     publish: /opt/build/repo/.next
49:56 AM:     publishOrigin: ui
49:56 AM:   plugins:
49:56 AM:     - inputs: {}
49:56 AM:       origin: ui
49:56 AM:       package: '@netlify/plugin-nextjs'
49:57 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
49:57 AM: Failing build: Failed to build site
49:57 AM: Finished processing build request in 41.587s

You're getting a **TypeScript type mismatch** during your Netlify build. The key error is here:

```
src/app/blog/[slug]/page.tsx
Type error: Type 'PageProps' does not satisfy the constraint 'import("/opt/build/repo/.next/types/app/blog/[slug]/page").PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
```

### 🔍 Diagnosis:
You’re probably doing something like this in your `page.tsx`:

```ts
type PageProps = {
  params: { slug: string }
};

export default function Page({ params }: PageProps) {
  // ...
}
```

But **Next.js is inferring** a different type for `params`, expecting it to be **`Promise<any>`**, which strongly suggests that either:
- Your route handler is declared `async`, but you're using `params` as a synchronous object.
- Or you are using `generateStaticParams()` and it's introducing a type mismatch.

---

### ✅ Fix:

Change your `PageProps` typing to explicitly satisfy the Next.js expectations.

Here’s the right way to define it in `/app/blog/[slug]/page.tsx`:

```ts
import { Metadata } from 'next';

interface PageProps {
  params: { slug: string }
}

export default function BlogPostPage({ params }: PageProps) {
  const { slug } = params;

  return (
    <div>
      <h1>Blog post: {slug}</h1>
    </div>
  );
}
```

If you're using `generateStaticParams()`, make sure it returns an array like this:

```ts
export async function generateStaticParams() {
  return [
    { slug: 'my-first-post' },
    { slug: 'another-one' },
  ];
}
```

---

### 🔒 Bonus Tips:
1. **Clean your `.next` build artifacts locally**, just in case:
   ```bash
   rm -rf .next
   ```

2. **Check your `tsconfig.json`**:
   Ensure it has:
   ```json
   "strict": true,
   "target": "ESNext",
   "module": "ESNext",
   "jsx": "preserve",
   ```

---

Would you like me to look at the full `page.tsx` file or write a safe, deployable version of it for you?

gpt-4o

import { getPostData, getAllPostSlugs } from '../../../lib/posts';
import BlogPostClient from '@/components/blog-post-client';
import type { Metadata, NextPage } from 'next';

interface PageProps {
  params: {
    slug: string;
  };
  searchParams?: { [key: string]: string | string[] | undefined };
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const typedParams = params as { slug: string };
  const postData = await getPostData(typedParams.slug);
  return {
    title: postData.title,
    description: postData.description,
  };
}

export async function generateStaticParams() {
  const posts = getAllPostSlugs();
  return posts;
}

const Post: NextPage<PageProps> = async ({ params }) => {
  const typedParams = params as { slug: string };
  const postData = await getPostData(typedParams.slug);

  return (
    <BlogPostClient postData={postData} />
  );
};

export default Post;

Thanks for sharing your code. The issue arises from how **Next.js infers the type for `params`** in your `generateMetadata` and `generateStaticParams` functions, **versus what you're declaring in `PageProps`**.

---

### 🔥 Exact Error:
> `Type '{ slug: string; }' is missing the following properties from type 'Promise<any>'`

That means **Next.js is expecting a `Promise`** somewhere it's being passed a plain object.

---

### ✅ Fix Summary:

Update your `generateStaticParams` to explicitly return the format that Next.js expects:

#### ✅ Fix 1 – `generateStaticParams`

```ts
export async function generateStaticParams(): Promise<{ slug: string }[]> {
  const posts = getAllPostSlugs();
  return posts.map((slug) => ({ slug }));
}
```

Make sure `getAllPostSlugs()` returns something like `['my-first-post', 'second-post']`.

---

### ✅ Fix 2 – Remove unnecessary `typedParams`

You're using `typedParams = params as { slug: string }`, but your `PageProps` already has the correct type. You can safely remove that casting.

---

### ✅ Fix 3 – Double-check your file structure

Make sure `src/app/blog/[slug]/page.tsx` is under the **App Router** convention (`app/`, not `pages/`) since you're using `generateStaticParams` and `generateMetadata`, which are App Router features.

---

### ✅ Final Corrected Code

```tsx
// src/app/blog/[slug]/page.tsx

import { getPostData, getAllPostSlugs } from '@/lib/posts';
import BlogPostClient from '@/components/blog-post-client';
import type { Metadata, NextPage } from 'next';

interface PageProps {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const postData = await getPostData(params.slug);
  return {
    title: postData.title,
    description: postData.description,
  };
}

export async function generateStaticParams(): Promise<{ slug: string }[]> {
  const slugs = getAllPostSlugs(); // should return: ['slug1', 'slug2']
  return slugs.map((slug) => ({ slug }));
}

const Post: NextPage<PageProps> = async ({ params }) => {
  const postData = await getPostData(params.slug);
  return <BlogPostClient postData={postData} />;
};

export default Post;
```

---

### 🧪 Final Check:
- `getAllPostSlugs()` **must return an array of slugs**, like: `['first-post', 'another-one']`
- No `.catch` or `.then` needed—just plain async functions.
- Make sure the file is in `app/blog/[slug]/page.tsx`, **not** under `pages/`.

Let me know if you want help adjusting `getAllPostSlugs` or `getPostData` too.

gpt-4o

58:11 AM: build-image version: 235a96ed6c11cbdf942eed7e70e6802956f9b464 (focal)
58:11 AM: buildbot version: 5276eccdd060881dae1f6d00b54ef962dbbaa654
58:12 AM: Fetching cached dependencies
58:12 AM: Starting to download cache of 407.6MB (Last modified: 2025-06-21 15:40:43 +0000 UTC)
58:13 AM: Finished downloading cache in 1.504s
58:13 AM: Starting to extract cache
58:20 AM: Finished extracting cache in 6.515s
58:20 AM: Finished fetching cache in 8.081s
58:20 AM: Starting to prepare the repo for build
58:20 AM: Preparing Git Reference refs/heads/master
58:24 AM: Starting to install dependencies
58:24 AM: Started restoring cached mise cache
58:26 AM: Finished restoring cached mise cache
58:27 AM: mise python@3.13.5   install
58:27 AM: mise python@3.13.5   download cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
58:27 AM: mise python@3.13.5   extract cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
58:28 AM: mise python@3.13.5   python --version
58:28 AM: mise python@3.13.5   Python 3.13.5
58:28 AM: mise python@3.13.5 ✓ installed
58:28 AM: Python version set to 3.13
58:30 AM: Collecting pipenv
58:30 AM:   Downloading pipenv-2025.0.3-py3-none-any.whl.metadata (17 kB)
58:30 AM: Collecting certifi (from pipenv)
58:30 AM:   Downloading certifi-2025.6.15-py3-none-any.whl.metadata (2.4 kB)
58:30 AM: Collecting packaging>=22 (from pipenv)
58:30 AM:   Downloading packaging-25.0-py3-none-any.whl.metadata (3.3 kB)
58:30 AM: Collecting setuptools>=67 (from pipenv)
58:30 AM:   Downloading setuptools-80.9.0-py3-none-any.whl.metadata (6.6 kB)
58:30 AM: Collecting virtualenv>=20.24.2 (from pipenv)
58:30 AM:   Downloading virtualenv-20.31.2-py3-none-any.whl.metadata (4.5 kB)
58:30 AM: Collecting distlib<1,>=0.3.7 (from virtualenv>=20.24.2->pipenv)
58:30 AM:   Downloading distlib-0.3.9-py2.py3-none-any.whl.metadata (5.2 kB)
58:30 AM: Collecting filelock<4,>=3.12.2 (from virtualenv>=20.24.2->pipenv)
58:30 AM:   Downloading filelock-3.18.0-py3-none-any.whl.metadata (2.9 kB)
58:30 AM: Collecting platformdirs<5,>=3.9.1 (from virtualenv>=20.24.2->pipenv)
58:30 AM:   Downloading platformdirs-4.3.8-py3-none-any.whl.metadata (12 kB)
58:30 AM: Downloading pipenv-2025.0.3-py3-none-any.whl (2.9 MB)
58:31 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2.9/2.9 MB 43.3 MB/s eta 0:00:00
58:31 AM: Downloading packaging-25.0-py3-none-any.whl (66 kB)
58:31 AM: Downloading setuptools-80.9.0-py3-none-any.whl (1.2 MB)
58:31 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.2/1.2 MB 48.3 MB/s eta 0:00:00
58:31 AM: Downloading virtualenv-20.31.2-py3-none-any.whl (6.1 MB)
58:31 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6.1/6.1 MB 111.3 MB/s eta 0:00:00
58:31 AM: Downloading certifi-2025.6.15-py3-none-any.whl (157 kB)
58:31 AM: Downloading distlib-0.3.9-py2.py3-none-any.whl (468 kB)
58:31 AM: Downloading filelock-3.18.0-py3-none-any.whl (16 kB)
58:31 AM: Downloading platformdirs-4.3.8-py3-none-any.whl (18 kB)
58:31 AM: Installing collected packages: distlib, setuptools, platformdirs, packaging, filelock, certifi, virtualenv, pipenv
58:33 AM: Successfully installed certifi-2025.6.15 distlib-0.3.9 filelock-3.18.0 packaging-25.0 pipenv-2025.0.3 platformdirs-4.3.8 setuptools-80.9.0 virtualenv-20.31.2
58:33 AM: [notice] A new release of pip is available: 24.3.1 -> 25.1.1
58:33 AM: [notice] To update, run: pip install --upgrade pip
58:33 AM: Attempting Ruby version 2.7.2, read from environment
58:35 AM: Using Ruby version 2.7.2
58:35 AM: Started restoring cached go cache
58:35 AM: Finished restoring cached go cache
58:36 AM: go version go1.19.13 linux/amd64
58:36 AM: Using PHP version 8.0
58:37 AM: Started restoring cached Node.js version
58:39 AM: Finished restoring cached Node.js version
58:40 AM: v22.16.0 is already installed.
58:40 AM: Now using node v22.16.0 (npm v10.9.2)
58:40 AM: Enabling Node.js Corepack
58:40 AM: Started restoring cached build plugins
58:40 AM: Finished restoring cached build plugins
58:40 AM: Started restoring cached corepack dependencies
58:40 AM: Finished restoring cached corepack dependencies
58:40 AM: No npm workspaces detected
58:40 AM: Started restoring cached node modules
58:40 AM: Finished restoring cached node modules
58:40 AM: Installing npm packages using npm version 10.9.2
58:42 AM: added 6 packages, and audited 546 packages in 2s
58:42 AM: 277 packages are looking for funding
58:42 AM:   run `npm fund` for details
58:42 AM: found 0 vulnerabilities
58:42 AM: npm packages installed
58:43 AM: Successfully installed dependencies
58:43 AM: Starting build script
58:44 AM: Detected 1 framework(s)
58:44 AM: "next" at version "15.3.4"
58:44 AM: Section completed: initializing
58:50 AM: ​
58:50 AM: Netlify Build                                                 
58:50 AM: ────────────────────────────────────────────────────────────────
58:50 AM: ​
58:50 AM: ❯ Version
58:50 AM:   @netlify/build 33.4.6
58:50 AM: ​
58:50 AM: ❯ Flags
58:50 AM:   accountId: 66d1d0902d36e530c7d461d3
58:50 AM:   baseRelDir: true
58:50 AM:   buildId: 6856d692b5b6cb0008e1f1c4
58:50 AM:   deployId: 6856d692b5b6cb0008e1f1c6
58:50 AM: ​
58:50 AM: ❯ Current directory
58:50 AM:   /opt/build/repo
58:50 AM: ​
58:50 AM: ❯ Config file
58:50 AM:   No config file was defined: using default values.
58:50 AM: ​
58:50 AM: ❯ Context
58:50 AM:   production
58:50 AM: ​
58:50 AM: ❯ Using Next.js Runtime - v5.11.3
58:52 AM: Next.js cache restored
58:52 AM: ​
58:52 AM: Build command from Netlify app                                
58:52 AM: ────────────────────────────────────────────────────────────────
58:52 AM: ​
58:52 AM: $ npm run build
58:52 AM: > next-animated-portfolio@0.1.0 build
58:52 AM: > next build
58:53 AM:    ▲ Next.js 15.3.4
58:53 AM:    Creating an optimized production build ...
59:02 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
58:59 AM:  ✓ Compiled successfully in 3.0s
58:59 AM:    Linting and checking validity of types ...
59:02 AM: Failed to compile.
59:02 AM: 
59:02 AM: src/app/blog/[slug]/page.tsx
59:02 AM: Type error: Type 'PageProps' does not satisfy the constraint 'import("/opt/build/repo/.next/types/app/blog/[slug]/page").PageProps'.
59:02 AM:   Types of property 'params' are incompatible.
59:02 AM:     Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
59:02 AM: Next.js build worker exited with code: 1 and signal: null
59:02 AM: ​
59:02 AM: "build.command" failed                                        
59:02 AM: ────────────────────────────────────────────────────────────────
59:02 AM: ​
59:02 AM:   Error message
59:02 AM:   Command failed with exit code 1: npm run build
59:02 AM: ​
59:02 AM:   Error location
59:02 AM:   In Build command from Netlify app:
59:02 AM:   npm run build
59:02 AM: ​
59:02 AM:   Resolved config
59:02 AM:   build:
59:02 AM:     command: npm run build
59:02 AM:     commandOrigin: ui
59:02 AM:     environment:
59:02 AM:       - STRIPE_SECRET_KEY
59:02 AM:     publish: /opt/build/repo/.next
59:02 AM:     publishOrigin: ui
59:02 AM:   plugins:
59:02 AM:     - inputs: {}
59:02 AM:       origin: ui
59:02 AM:       package: '@netlify/plugin-nextjs'
59:02 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
59:02 AM: Failing build: Failed to build site
59:02 AM: Finished processing build request in 50.974s

You're still hitting the same type error:

```
Type error: Type 'PageProps' does not satisfy the constraint '...PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
```

This tells us that somewhere in your code, `params` is being interpreted as a **`Promise`**, not an object like `{ slug: string }`.

---

### ✅ Fix the Root Issue

You **typed your function params with `PageProps`**, but Next.js expects just `params`, not a whole object with `params` and `searchParams`. For `generateMetadata()` and `generateStaticParams()`, **don’t reuse your full `PageProps` type.** Use inline types instead.

---

### ✅ Correct Version of Your File (`/app/blog/[slug]/page.tsx`)

```tsx
import { getPostData, getAllPostSlugs } from '@/lib/posts';
import BlogPostClient from '@/components/blog-post-client';
import type { Metadata } from 'next';

interface Props {
  params: {
    slug: string;
  };
  searchParams?: { [key: string]: string | string[] | undefined };
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const postData = await getPostData(params.slug);
  return {
    title: postData.title,
    description: postData.description,
  };
}

export async function generateStaticParams(): Promise<{ slug: string }[]> {
  const slugs = getAllPostSlugs(); // returns string[] like ['post-1', 'post-2']
  return slugs.map((slug) => ({ slug }));
}

export default async function Post({ params }: Props) {
  const postData = await getPostData(params.slug);
  return <BlogPostClient postData={postData} />;
}
```

---

### 🔍 Why this Works

- `generateMetadata` and `generateStaticParams` have special types that **must be directly typed inline** — not from a shared interface like `PageProps`, because TypeScript can't infer the correct generic constraints across Next.js' type system with those custom aliases.
- You were passing a full `PageProps` object when Next.js just wanted `{ params }`, which it knows how to handle.
- Your previous `PageProps` interface was being applied **to functions Next.js decorates**, which is fragile.

---

### ✅ Bonus: Sanity Check

Check the output of this function:

```ts
console.log(await getAllPostSlugs());
```

It should output:

```ts
['post-1', 'another-post', 'some-other-slug']
```

If it returns `[{ params: { slug: string } }]`, **you’re double-wrapping** and should flatten it.

---

Let me know if you want a quick test script for `getAllPostSlugs()` or help inspecting `lib/posts.ts`.

gpt-4o

00:03 AM: build-image version: 235a96ed6c11cbdf942eed7e70e6802956f9b464 (focal)
00:03 AM: buildbot version: 5276eccdd060881dae1f6d00b54ef962dbbaa654
00:03 AM: Fetching cached dependencies
00:03 AM: Starting to download cache of 407.6MB (Last modified: 2025-06-21 15:40:43 +0000 UTC)
00:05 AM: Finished downloading cache in 2.09s
00:05 AM: Starting to extract cache
00:08 AM: Finished extracting cache in 2.662s
00:08 AM: Finished fetching cache in 4.813s
00:08 AM: Starting to prepare the repo for build
00:08 AM: Preparing Git Reference refs/heads/master
00:10 AM: Starting to install dependencies
00:10 AM: Started restoring cached mise cache
00:10 AM: Finished restoring cached mise cache
00:11 AM: mise python@3.13.5   install
00:11 AM: mise python@3.13.5   download cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
00:11 AM: mise python@3.13.5   extract cpython-3.13.5+20250612-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
00:12 AM: mise python@3.13.5   python --version
00:12 AM: mise python@3.13.5   Python 3.13.5
00:12 AM: mise python@3.13.5 ✓ installed
00:12 AM: Python version set to 3.13
00:13 AM: Collecting pipenv
00:13 AM:   Downloading pipenv-2025.0.3-py3-none-any.whl.metadata (17 kB)
00:13 AM: Collecting certifi (from pipenv)
00:13 AM:   Downloading certifi-2025.6.15-py3-none-any.whl.metadata (2.4 kB)
00:13 AM: Collecting packaging>=22 (from pipenv)
00:13 AM:   Downloading packaging-25.0-py3-none-any.whl.metadata (3.3 kB)
00:13 AM: Collecting setuptools>=67 (from pipenv)
00:13 AM:   Downloading setuptools-80.9.0-py3-none-any.whl.metadata (6.6 kB)
00:13 AM: Collecting virtualenv>=20.24.2 (from pipenv)
00:13 AM:   Downloading virtualenv-20.31.2-py3-none-any.whl.metadata (4.5 kB)
00:13 AM: Collecting distlib<1,>=0.3.7 (from virtualenv>=20.24.2->pipenv)
00:13 AM:   Downloading distlib-0.3.9-py2.py3-none-any.whl.metadata (5.2 kB)
00:13 AM: Collecting filelock<4,>=3.12.2 (from virtualenv>=20.24.2->pipenv)
00:13 AM:   Downloading filelock-3.18.0-py3-none-any.whl.metadata (2.9 kB)
00:13 AM: Collecting platformdirs<5,>=3.9.1 (from virtualenv>=20.24.2->pipenv)
00:13 AM:   Downloading platformdirs-4.3.8-py3-none-any.whl.metadata (12 kB)
00:13 AM: Downloading pipenv-2025.0.3-py3-none-any.whl (2.9 MB)
00:13 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2.9/2.9 MB 74.1 MB/s eta 0:00:00
00:13 AM: Downloading packaging-25.0-py3-none-any.whl (66 kB)
00:13 AM: Downloading setuptools-80.9.0-py3-none-any.whl (1.2 MB)
00:13 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.2/1.2 MB 71.4 MB/s eta 0:00:00
00:13 AM: Downloading virtualenv-20.31.2-py3-none-any.whl (6.1 MB)
00:13 AM:    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6.1/6.1 MB 183.3 MB/s eta 0:00:00
00:13 AM: Downloading certifi-2025.6.15-py3-none-any.whl (157 kB)
00:13 AM: Downloading distlib-0.3.9-py2.py3-none-any.whl (468 kB)
00:14 AM: Downloading filelock-3.18.0-py3-none-any.whl (16 kB)
00:14 AM: Downloading platformdirs-4.3.8-py3-none-any.whl (18 kB)
00:14 AM: Installing collected packages: distlib, setuptools, platformdirs, packaging, filelock, certifi, virtualenv, pipenv
00:15 AM: Successfully installed certifi-2025.6.15 distlib-0.3.9 filelock-3.18.0 packaging-25.0 pipenv-2025.0.3 platformdirs-4.3.8 setuptools-80.9.0 virtualenv-20.31.2
00:15 AM: [notice] A new release of pip is available: 24.3.1 -> 25.1.1
00:15 AM: [notice] To update, run: pip install --upgrade pip
00:15 AM: Attempting Ruby version 2.7.2, read from environment
00:16 AM: Using Ruby version 2.7.2
00:17 AM: Started restoring cached go cache
00:17 AM: Finished restoring cached go cache
00:17 AM: go version go1.19.13 linux/amd64
00:17 AM: Using PHP version 8.0
00:18 AM: Started restoring cached Node.js version
00:19 AM: Finished restoring cached Node.js version
00:19 AM: v22.16.0 is already installed.
00:19 AM: Now using node v22.16.0 (npm v10.9.2)
00:19 AM: Enabling Node.js Corepack
00:19 AM: Started restoring cached build plugins
00:19 AM: Finished restoring cached build plugins
00:19 AM: Started restoring cached corepack dependencies
00:19 AM: Finished restoring cached corepack dependencies
00:19 AM: No npm workspaces detected
00:19 AM: Started restoring cached node modules
00:19 AM: Finished restoring cached node modules
00:20 AM: Installing npm packages using npm version 10.9.2
00:22 AM: added 6 packages, and audited 546 packages in 2s
00:22 AM: 277 packages are looking for funding
00:22 AM:   run `npm fund` for details
00:22 AM: found 0 vulnerabilities
00:22 AM: npm packages installed
00:22 AM: Successfully installed dependencies
00:22 AM: Starting build script
00:23 AM: Detected 1 framework(s)
00:23 AM: "next" at version "15.3.4"
00:23 AM: Section completed: initializing
00:25 AM: ​
00:25 AM: Netlify Build                                                 
00:25 AM: ────────────────────────────────────────────────────────────────
00:25 AM: ​
00:25 AM: ❯ Version
00:25 AM:   @netlify/build 33.4.6
00:25 AM: ​
00:25 AM: ❯ Flags
00:25 AM:   accountId: 66d1d0902d36e530c7d461d3
00:25 AM:   baseRelDir: true
00:25 AM:   buildId: 6856d6fe988c04000816e82a
00:25 AM:   deployId: 6856d6fe988c04000816e82c
00:25 AM: ​
00:25 AM: ❯ Current directory
00:25 AM:   /opt/build/repo
00:25 AM: ​
00:25 AM: ❯ Config file
00:25 AM:   No config file was defined: using default values.
00:25 AM: ​
00:25 AM: ❯ Context
00:25 AM:   production
00:25 AM: ​
00:25 AM: ❯ Using Next.js Runtime - v5.11.3
00:26 AM: Next.js cache restored
00:26 AM: ​
00:26 AM: Build command from Netlify app                                
00:26 AM: ────────────────────────────────────────────────────────────────
00:26 AM: ​
00:26 AM: $ npm run build
00:27 AM: > next-animated-portfolio@0.1.0 build
00:27 AM: > next build
00:27 AM:    ▲ Next.js 15.3.4
00:27 AM:    Creating an optimized production build ...
00:35 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
00:32 AM:  ✓ Compiled successfully in 2000ms
00:32 AM:    Linting and checking validity of types ...
00:34 AM: Failed to compile.
00:34 AM: 
00:34 AM: src/app/blog/[slug]/page.tsx
00:34 AM: Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
00:34 AM:   Types of property 'params' are incompatible.
00:34 AM:     Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
00:34 AM: Next.js build worker exited with code: 1 and signal: null
00:34 AM: ​
00:34 AM: "build.command" failed                                        
00:34 AM: ────────────────────────────────────────────────────────────────
00:34 AM: ​
00:34 AM:   Error message
00:34 AM:   Command failed with exit code 1: npm run build
00:34 AM: ​
00:34 AM:   Error location
00:34 AM:   In Build command from Netlify app:
00:34 AM:   npm run build
00:34 AM: ​
00:34 AM:   Resolved config
00:34 AM:   build:
00:34 AM:     command: npm run build
00:34 AM:     commandOrigin: ui
00:34 AM:     environment:
00:34 AM:       - STRIPE_SECRET_KEY
00:34 AM:     publish: /opt/build/repo/.next
00:34 AM:     publishOrigin: ui
00:34 AM:   plugins:
00:34 AM:     - inputs: {}
00:34 AM:       origin: ui
00:34 AM:       package: '@netlify/plugin-nextjs'
00:35 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
00:35 AM: Failing build: Failed to build site
00:35 AM: Finished processing build request in 31.753s

You're still getting the same error in your build:

```
Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
```

This means something is still being inferred as a **`Promise`** when it's supposed to be an object.

---

### ✅ Minimal Working Fix for `/app/blog/[slug]/page.tsx`

Here’s the clean version that will solve your build issue on Netlify:

```tsx
import { getPostData, getAllPostSlugs } from '@/lib/posts';
import BlogPostClient from '@/components/blog-post-client';
import type { Metadata } from 'next';

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const postData = await getPostData(params.slug);
  return {
    title: postData.title,
    description: postData.description,
  };
}

export async function generateStaticParams(): Promise<{ slug: string }[]> {
  const slugs = getAllPostSlugs(); // must return array of { slug }
  return slugs.map((slug) => ({ slug }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const postData = await getPostData(params.slug);
  return <BlogPostClient postData={postData} />;
}
```

---

### ✅ Double-check `getAllPostSlugs()`

This must return an array of **strings**:

```ts
// lib/posts.ts
export function getAllPostSlugs(): string[] {
  return ['my-post', 'another-one']; // or from filesystem or database
}
```

If it returns something like `{ params: { slug: string } }[]`, you need to **flatten it** like this:

```ts
export function getAllPostSlugs(): string[] {
  return [{ params: { slug: 'my-post' } }, ...].map(p => p.params.slug);
}
```

---

### ❌ Do NOT Use `PageProps` Interface on Route Handlers

Do not reuse `PageProps` interface like this:

```ts
const Page = async ({ params }: PageProps) => { ... } // ❌
```

That causes a conflict with the expected type in the `app/` directory where Next.js uses typed route segments directly.

---

### ✅ Summary: To Fix

- ❌ Remove your shared `PageProps` interface
- ✅ Type `params` inline for each function
- ✅ Ensure `getAllPostSlugs()` returns `string[]` — not wrapped objects
- ✅ Use the updated file above for `/app/blog/[slug]/page.tsx`

Let me know if you want help editing `getAllPostSlugs()` or dumping its output to confirm!

gpt-4o