What is the process for including a new attribute in NextRequest categories?

Question

What is the process for including a new attribute in NextRequest categories?

I'm currently working on a middleware that will introduce a new "name" property to NextRequest. This specific property is intended for use in other sections of the API.

import { NextRequest, NextResponse } from 'next/server'

export function applyMiddleware(req: NextRequest) {
    req.name = 'Foo'

    NextResponse.next()
}

Encountering the error message

Property 'name' does not exist on type 'NextRequest'

One possible solution could involve creating an interface that extends NextRequest. However, this approach would require importing all files that need access to the "name" property.

import { NextRequest, NextResponse } from 'next/server'

interface CustomRequest extends NextRequest {
    name: string
}

export function applyMiddleware(req: CustomRequest) {
    req.name = 'Foo'

    NextResponse.next()
}

Is there a method to incorporate this property into the global types of NextRequest?

typescript next.js

Answer 1

Answer №1

Illustrating my problem-solving approach following the advice provided by juliomalves

To address this issue, create a .d.ts file with any desired name

// custom.d.ts
import { NextRequest as OriginalNextRequest } from 'next/server'

declare global {
    declare interface NextRequest extends OriginalNextRequest {
        name: string
    }
}

Key points to consider:

extends OriginalNextRequest is necessary to display all NextRequest types of next
It is recommended to rename the import for NextRequest to avoid conflicts in TypeScript when extending it, ensuring that autocomplete suggestions include all properties

Including the modified NextRequest via import statement

// tsconfig.json

"paths": {
    "*": ["*.d.ts"]
}

If the .d.ts file is within a directory

"paths": {
    "*": ["types/*.d.ts"]
}

With these changes, TypeScript will no longer flag errors regarding the absence of name in NextRequest

import { NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
    req.name = 'Foo'

    NextResponse.next()
}

NOTE: Avoid importing NextRequest directly from next to prevent overwriting the global type definition

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
    req.name = 'Foo' // error

    NextResponse.next()
}

If you prefer using NextRequest from next, consider renaming the import

Answer 2

Illustrating my problem-solving approach following the advice provided by juliomalves

To address this issue, create a .d.ts file with any desired name

// custom.d.ts
import { NextRequest as OriginalNextRequest } from 'next/server'

declare global {
    declare interface NextRequest extends OriginalNextRequest {
        name: string
    }
}

Key points to consider:

extends OriginalNextRequest is necessary to display all NextRequest types of next
It is recommended to rename the import for NextRequest to avoid conflicts in TypeScript when extending it, ensuring that autocomplete suggestions include all properties

Including the modified NextRequest via import statement

// tsconfig.json

"paths": {
    "*": ["*.d.ts"]
}

If the .d.ts file is within a directory

"paths": {
    "*": ["types/*.d.ts"]
}

With these changes, TypeScript will no longer flag errors regarding the absence of name in NextRequest

import { NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
    req.name = 'Foo'

    NextResponse.next()
}

NOTE: Avoid importing NextRequest directly from next to prevent overwriting the global type definition

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
    req.name = 'Foo' // error

    NextResponse.next()
}

If you prefer using NextRequest from next, consider renaming the import

What is the process for including a new attribute in NextRequest categories?

Answer №1

Similar questions

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

How to declare and initialize a variable in Angular 2 using TypeScript

Tailored component properties for React applications

Error: JSON input ended unexpectedly, and data retrieval is not possible

Category of ambiguous attributes

Error caused by properties of a variable derived from an interface in the compiler

Encountering a Difficulty while attempting to Distinguish in Angular

What is the correct way to properly enter a Svelte component instance variable?

Navigating with Next.js 13: The correct way to redirect to a dynamic route while ensuring that only the latest data is

What steps do I need to take to implement Dispatch in a React Native project?

What is the process of substituting types in typescript?

Merging an assortment of items based on specific criteria

What could be causing the error message "Error: Failed to retrieve component for route: '/settings'" to occur in next js?

Is it possible to utilize a function within an Angular [routerLink] to define the query parameter?

NextJS: Build error - TypeScript package not detected

RXJS - Hold off until the shop is fully stocked

How can I utilize a filter or pipe to populate product categories onto screens within Ionic 2?

Is it planned to include StencilJS as a development choice in Ionic?

The transition from true to false occurs in router.isFallback

Using Regex to replace special characters in TypeScript