DEV Community: Rola Muibi

How to fix Next.js “Type error: Type 'Props' does not satisfy the constraint 'LayoutProps'”

Rola Muibi — Sat, 03 May 2025 02:08:01 +0000

While trying to add generateMetadata to the layout.tsx in the dynamic route under the blog dir, I bumped into this error:

Type error: Type 'Props' does not satisfy the constraint 'LayoutProps' .
Types of property 'params' are incompatible.
Type 'Params' is missing the following properties from type Promise<any?: then, catch, finally, [Symbol.toStringTag]

This issue is actually part of a breaking change in Next.js 15.

Here’s how to fix it:

To fix this, update the params type to be a Promise and use await to resolve it inside the function.

import type { Metadata } from "next"

// make this a promise
interface Props {
  params: Promise<{ slug?: string }>;
}

export async function generateMetadata({ params}: Props): Promise<Metadata> {
  const { slug } = await params; //await here

}

Why did this issue happen?

This happened because Next.js 15 made params asynchronous in certain functions like generateMetadata. That means params is no more a plain object, it's now a promise that needs to be awaited.

In your original code, you probably treated params like a regular object, but Next.js 15 now expects it to be a Promise that resolves to an object, so TypeScript throws an error. It's complaining that your params is missing properties that come with a Promise (like .then, .catch, etc.).

So now changing params to a Promise will match what Next.js 15 expects.

Why did Next.js 15 add this change?

Next.js is changing some features (like cookies, headers, params, and searchParams) to work asynchronously. Usually, when someone visits a page, the server waits for the request before it generates and sends back the content for that page. This means the server typically doesn't render the page until it gets the request and any associated data (like parameters or cookies).

Since not all parts depend on the request data, the server no longer has to wait before rendering. And now the sever can prepare earlier and only wait when it really needs that data. Read more about this on Vercel’s website.

Recap of the Next.js Bug That Got Apps Hacked (And How to Protect Yours)

Rola Muibi — Sun, 27 Apr 2025 18:19:51 +0000

For Next.js developers using versions 11.1.4 through 15.2, there was a recent security bug in Next.js (CVE-2025-29927), that let attackers skip middleware checks and reach protected parts of a site. This is due to how Next.js handles this header x-middleware-subrequest which allows hackers to trick Next.js into thinking middleware already ran.

This only affects apps not hosted by Vercel or Netlify and runs with next start. To fix this, you can update to the most recent fixed releases. If you cannot update your Next.js version now, block or remove the header and add extra auth checks in your routes and API logic.

What happened

Next.js has a system to stop middleware from running in a loop. It uses a special header called x-middleware-subrequest to count how many times middleware runs.

If it runs too many times (5 by default), Next.js skips middleware to avoid an endless loop.

The problem is, anyone can set this header themselves.

Hackers can fake the header, make it look like middleware already ran too much, and Next.js will skip all security checks.

Here’s a basic idea of how it works:

const subrequests = request.headers.get('x-middleware-subrequest')?.split(':') || [];
const depth = subrequests.filter(s => s === middlewareName).length;

if (depth >= MAX_RECURSION_DEPTH) {
  return NextResponse.next(); // this skips middlewares
}

What hackers do

They send a fake request to a protected endpoint. In their fake request, they manually add the header x-middleware-subrequest with lots of fake entries. Here is an example:


GET /protected-page
x-middleware-subrequest: auth:auth:auth:auth:auth

Now, when Next.js receives that request, it will think:

"this middleware already ran 5 times. I should skip it now."

But in reality, middleware never ran even once, the hacker just tricked it.

Who is affected

This issue only affects apps that are self hosted and uses next start with the standalone output. If your app is deployed on Vercel, Netlify, or your site is just a static file, you are not affected.

How to fix

Update Next.js now
- 12.x → 12.3.5
- 13.x → 13.5.9
- 14.x → 14.2.25
- 15.x → 15.2.3
Block or remove the header
- In NGINX:

 location / {
          proxy_set_header x-middleware-subrequest "";

In Apache:

        RequestHeader unset x-middleware-subrequest

In Cloudflare’s WAF, add a rule that blocks any incoming request that contains the header called x-middleware-subrequest.

Always add extra checks and don’t just trust middleware only

Don’t only rely on middleware, always add extra layers of authorization:

In your page code
In your API routes
In your database

For example, if your dashboard shows private info, the API should still check if the user is logged in and authorized to view the requested data. Even if someone skips the middleware, they still won't get the data.

For more information regarding this critical flaw, visit the official Vercel’s blog.

Jest and Vite: Cannot use `import.meta` outside a module

Rola Muibi — Wed, 24 Apr 2024 20:19:41 +0000

This post describes a fix for a common issue with Jest and using import.meta to load environment variables.

The problem

In react, I kept running into an error when testing with jest. In my case, Jest could not recognize import.meta.env.

The error I got was:

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel
configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:
    SyntaxError: Cannot use 'import.meta' outside a module

The reason

Jest, by default, uses CommonJS module system for handling JavaScript modules. CommonJS doesn't support import.meta because it's a feature introduced in ECMAScript modules (ESM).

Also import.meta.env is a feature provided by Vite for loading environment variables so it is not recognized by default in Jest or Node.js.

Therefore, when Jest encounters import.meta or import.meta.env in the code, it doesn't recognize it and throws an error.

The solution

After much trial and error, here's what worked:

1. Install dependencies

npm install --save-dev babel-jest jest-environment-jsdom @babel/preset-env @babel/preset-react babel-preset-vite

2. Create a babel.config.json file

After installing the above dependencies, we need to configure Babel.

// babel.config.json

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],

    "@babel/preset-react",

    [
      "babel-preset-vite",
      {
        "env": true,
        "glob": false
      }
    ]
  ]
}

3. Finally, configure your jest.config.js file

In your jest.config.js file, include this

// jest.config.js

export default {
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  testEnvironment: "jest-environment-jsdom",
  transform: {
    "^.+\\.[t|j]sx?$": "babel-jest",
  },
};

Conclusion

Jest throwing an error when import.meta or import.meta.env is used is due to its default use of the CommonJS module system and import.meta.env being a feature of vite. This issue can be resolved by configuring Jest and Babel correctly. With the above steps, we can successfully use import.meta and import.meta.env in our code and Jest tests.