Next.js Discord

Discord Forum

does not satisfy the constraint 'PageProps'. on Server

Unanswered
Satin posted this in #help-forum
Open in Discord
SatinOP
Hi,

So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is:
Failed to compile.
app/[lang]/about-us/page.tsx
Type error: Type '{ params: { lang: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ lang: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Error: Command "npm run build" exited with 1


while locally it works, The page in question is:

type Props = {
  params: Promise<{ lang: string }>;
};

export default async function Page(props: Props) {
  const { lang } = await props.params;
  const dict = await getDictionary(lang);

  return (
    <div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="bg-gray-50 min-h-screen">
      <Navigation lang={lang} />
      <main className="py-16">
        <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl font-bold text-gray-800 mb-6">
            {dict.pages.aboutUs.title}
          </h1>
          <p className="text-lg text-gray-600">
            {dict.pages.aboutUs.description}
          </p>
        </section>
      </main>
      <Footer lang={lang} />
    </div>
  );
}


I am confused.

32 Replies

@B33fb0n3 which nextjs version are you using (check your package.json)?
SatinOP
Latest version 15.1.2
@Satin Latest version 15.1.2
can you share your package.json?
@B33fb0n3 can you share your package.json?
SatinOP
Sure one sec
@B33fb0n3 can you share your package.json?
SatinOP
{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@formatjs/intl-localematcher": "^0.5.9",
    "@supabase/supabase-js": "^2.47.10",
    "@tailwindcss/typography": "^0.5.15",
    "lucide-react": "^0.469.0",
    "negotiator": "^1.0.0",
    "next": "^15.1.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss-rtl": "^0.9.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/negotiator": "^0.6.3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.20",
    "eslint": "^9",
    "eslint-config-next": "15.1.2",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
@Satin Hi, So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is: Failed to compile. app/[lang]/about-us/page.tsx Type error: Type '{ params: { lang: string; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ lang: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] Error: Command "npm run build" exited with 1 while locally it works, The page in question is: ts type Props = { params: Promise<{ lang: string }>; }; export default async function Page(props: Props) { const { lang } = await props.params; const dict = await getDictionary(lang); return ( <div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="bg-gray-50 min-h-screen"> <Navigation lang={lang} /> <main className="py-16"> <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <h1 className="text-4xl font-bold text-gray-800 mb-6"> {dict.pages.aboutUs.title} </h1> <p className="text-lg text-gray-600"> {dict.pages.aboutUs.description} </p> </section> </main> <Footer lang={lang} /> </div> ); } I am confused.
are you sure the code on the server is the same code that you have locally? your local code looks good.

the error message says
{ params: { lang: string; }; }
but your local type is
{ params: Promise<{ lang: string }>; }
which are not the same, which is why i asked the question.

it could also be the case that the error and the code in question are two different pages. the error is for page app/[lang]/about-us/page.tsx
@Satin Thats my confusion on Vercel. If ur familiar with it. I feel like its not updating my code to the latest.
ive never seen it do that though...

the deployment page on vercel should have a link to the commit from which it builds the app. is that the latest commit in your repository?
@Satin Its showing the last commit. Tho going to source page its not updated
woah, really bizarre. try making a dummy commit, like updating readme.md, for it to rebuild again. does it work now?

if not, check the source tab and see if the { params: Promise<{ lang: string }>; } and the dummy commit changes are reflected there.
you can try rebuilding without cache as well, though i doubt it'll help.

worst case scenario, can always make a new project on vercel.
@joulev you can try rebuilding without cache as well, though i doubt it'll help. worst case scenario, can always make a new project on vercel.
SatinOP
I didnt try that cache thing. But yea as a last resort i will do that
Cuz im new to next js i thought im going crazy
yeah no your code is fine, it looks like vercel is going crazy
It is always like this
Cuz i dont wanna shoot myself in the foot like i did with firebase 2 years ago
Asian black bear
@Satin Has this ever been resolved? Were you able to figure out the issue?
@Asian black bear <@150276446621925377> Has this ever been resolved? Were you able to figure out the issue?
SatinOP
Hi, Yes i was able to solve it, i had to change the functions to be like:
type Props = {
  params: Promise<{
    [x: string]: string; lang: string 
}>;
};

export default async function PostPage(props: Props) ...


somehow it worked
Asian black bear
This is really weird and completely not by design since the type is not correct...
Thanks for letting me know regardless.
@Asian black bear Thanks for letting me know regardless.
SatinOP
no worries
as always, solve one issue and 10 pop up
@luis_llanes This isn’t intuitive, that extra parameter should not exist just to solve a problem :/
SatinOP
i spent 3 days, this was the only solution
that i found
Then the solution makes no sense, it should be ok with
{ params : Promise<{ lang: string }> }
I’m confused too lol