> This page is for Applications Protection.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.humansecurity.com/llms.txt.

# Installation (Next.js 15 and lower)

## Prerequisites

1. Next.js 12.2 or newer
2. An existing Next.js application. If you don’t have one, [create a new application](https://nextjs.org/docs/getting-started).

## Installing the NextJS Enforcer

Integrate the HUMAN Enforcer into your NextJS project by setting it as a [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) in your project.

While only one `middleware.ts` file is supported per project, you can still organize your middleware logic modularly. Placing HUMAN Enforcer middleware first, ensures that all incoming requests are evaluated for security threats before any other processing occurs. If you have additional middleware functions, use the `onPass` and `onResponse` custom functions.

### Installation

1. Install the HUMAN NextJS Enforcer NPM package into your existing NextJS project.

```sh
npm install --save perimeterx-nextjs
```

Integrate the HUMAN Enforcer into your NextJS project by setting the it as a middleware in your project.

1. In the root directory of your project, create a `middleware.ts` (or `middleware.js` if you're using JavaScript) file to configure and set up Human middleware.

2. Integrate the HUMAN Enforcer into your NextJS project by setting the it as a middleware in your project by Initiate a configuration object contains px\_app\_id - Your Application ID, px\_cookie\_secret - Your Cookie Encryption Key, px\_auth\_token - Auth Token, import and use the `perimeterx` function.\
   .

```ts
import { perimeterx } from "perimeterx-nextjs";
import { PerimeterXConfigurations } from "perimeterx-nextjs";

// define HUMAN configuration
const pxConfig: PerimeterXConfigurations = {
    px_app_id: '<APP_ID>',
    px_cookie_secret: '<COOKIE_SECRET>',
    px_auth_token: '<AUTH_TOKEN>',
}
export const middleware = perimeterx(pxConfig)
```

### If you already use middleware in your project

Add implementation to our built it `onRespnose` and `onPass` custom functions to your configuration object, in order to execute your own middleware/logic after HUMAN verifies the request.

**OnPass**\
Define what to do when requests pass HUMAN enforcement.

* Parameters
  * request: [NextRequest](https://nextjs.org/docs/app/api-reference/functions/next-request)
* Returns a [NextResponse](https://nextjs.org/docs/app/api-reference/functions/next-response) object (or a Promise resolving to a boolean)

```typescript
const pxConfig: PerimeterXConfigurations = {
    px_app_id: '<APP_ID>',
    px_cookie_secret: '<COOKIE_SECRET>',
    px_auth_token: '<AUTH_TOKEN>',
    onPass: (request: NextRequest) => {
        const response = NextResponse.next();
        response.headers.set('test-header', 'test');

        // Return the customized response
        return response;
    },
  // ...
}

export const middleware = perimeterx(pxConfig)
```

**onResponse**\
This function allows modification of the response when Human Security decides to return custom response for example in case of block, static resources, etc...

* Parameters
  * request: [NextRequest](https://nextjs.org/docs/app/api-reference/functions/next-request)
  * response: [NextResponse](https://nextjs.org/docs/app/api-reference/functions/next-response)
* Returns a [NextResponse](https://nextjs.org/docs/app/api-reference/functions/next-response) object (or a Promise resolving to a boolean)

```typescript
const config: PerimeterXConfigurations = {
    px_app_id: '<APP_ID>',
    px_cookie_secret: '<COOKIE_SECRET>',
    px_auth_token: '<AUTH_TOKEN>',
    onResponse: (request: NextRequest, response: Response) => { 
        const nextResponse = NextResponse.next();
        nextResponse.headers.set('X-PX-Status', response.headers.get('test'));

        // Return the customized response
        return nextResponse;
    },
    // ...
}

export const middleware = perimeterx(pxConfig)
```