Is there no overload that matches this call in the middleware used in Next.js with Typescript?

There is an issue with one of the overloads in this call. Overload 1 out of 4, '(args_0: GetServerSidePropsContext): Promise<Session | null>', resulted in the following error. The argument type '(req: NextAuthRequest) => Response | null' cannot be assigned to a parameter of type 'GetServerSidePropsContext'. Overload 2 out of 4, '(args_0: (req: NextAuthRequest) >> void | Response | Promise<void | Response>): AppRouteHandlerFn', caused the following error. The argument type '(req: NextAuthRequest) => Response | null' cannot be assigned to a parameter of type '(req: NextAuthRequest) >> void | Response | Promise<void | Response>'. The type 'Response | null' cannot be assigned to the type 'void | Response | Promise<void | Response>'. The type 'null' cannot be assigned to the type 'void | Response | Promise<void | Response>'.ts(2769) (parameter) req: NextAuthRequest

I encountered this error within the section: "(req) => {"

Here is the complete file:

import authConfig from "@/auth.config";
import NextAuth from "next-auth";
import {
  apiAuthPrefix,
  DEFAULT_LOGIN_REDIRECT,
  authRoutes,
  publicRoutes,
} from "@/routes";
export const { auth } = NextAuth(authConfig);

export default auth((req) => {
  const { nextUrl } = req;
  const isLoggedIn = !!req.auth;
  const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
  const isAuthRoute = authRoutes.includes(nextUrl.pathname);
  const isPublicRoute = publicRoutes.includes(nextUrl.pathname);

  if (isApiAuthRoute) {
    return null;
  }
  if (isAuthRoute) {
    if (isLoggedIn) {
      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
    }
    return null;
  }
  if (!isLoggedIn && !isPublicRoute) {
    return Response.redirect(new URL("/auth/login", nextUrl));
  }

  return null;
});

// Optionally, don't invoke Middleware on some paths
export const config = {
  matcher: ["/((?!.+\\.\\w+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Answer №1

Instead of returning null, simply return a native Response

Answer №2

Discovered the solution after encountering a similar issue. By replacing all instances of return null; with return;, the problem can be resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React JS - CORS error persists despite implementing cors settings

Currently utilizing Express and ReactJS Express Code: const Express = require('express'); const PORT = 5000; const cors = require('cors'); const server = Express(); server.use(cors()); // CORS added here server.get('/users&ap ...

Guide on retrieving 'params' in a client-side component within Next13

Is there a way to retrieve query parameters like (/home?id=1) using the useSearchParams hook? I am trying to obtain /home/[id] in a client component, but the old approach of using next/router with router.query is no longer supported in next/navigation. In ...

Encountering an error when initializing a form array with an existing array of multiple objects in Angular 13: "Control not found with

Hey there, I'm brand new to Angular and I'm trying to set up a form array with an existing array that contains multiple objects. However, I keep encountering the following error: Cannot find control with path: 'variable-> 0 -> id&apo ...

Issues arising when serving next.js static assets from the public folder post-build

Currently, I am developing a Next.js application that needs to be deployed on an offline LAN server. The challenge I am facing is related to serving static files like images and QR codes in the backoffice section of the app where users can add, update, or ...

Maintaining search filters across pages in Angular 2 using URL parameters

I am attempting to store certain filters in the URL for my application, so that they can be reapplied when the page is reloaded. I am encountering challenges with Dates (using moment), nullable properties, and special characters (/). When I pass values to ...

Having trouble incorporating @types/pdfmake into an Angular project

I have been experimenting with integrating a JS library called pdfmake into an Angular application. I found some guidance on how to accomplish this at https://www.freecodecamp.org/news/how-to-use-javascript-libraries-in-angular-2-apps/, which involved usin ...

How to set up npm to utilize the maven directory format and deploy war files

Embarking on my very first pure front-end project, I decided to deploy it using Java/Maven. To begin, I set up a standard WAR project: │ package.json │ pom.xml │ tsconfig.json │ typings.json │ │ ├───src │ └───main ...

What is the method for showing an image from an external file using an image component?

I'm currently working on a project using React and Next.js. When I use a basic image tag like the example below, const IMG_API = 'http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png'; <img src={IMG_API} ...

Fairly intricate React function component declaration with TypeScript

const withAuth = () => <OriginalProps extends {}>( Component: React.ComponentType<OriginalProps & IAuthContextInterface> ) => { } (withAuth()(PrivateRoute)) // this is how the HOC called Could someone simplify what this function d ...

Animation of scroll progress in Next.js and Framer Motion

I am attempting to create a viewport scroll progress circle using Framer Motion in a Next.js application, incorporating Tailwind CSS. I referred to the example code provided by Framer Motion here:https://codesandbox.io/s/framer-motion-viewport-scroll-and-s ...

Retrieve intricate information from an API, generate an array of objects, and loop through them

I am attempting to create an array of intricate objects from the following data: My goal is to utilize this object array to generate components using map() To structure the response type, I utilized : // ... other types like Tag export type DatasetInfo ...

The 'any' type is not compatible with constructor functions

I am currently working on implementing a class decorator in Typescript. I have a function that accepts a class as an argument. const createDecorator = function () { return function (inputClass: any) { return class NewExtendedClass extends inputClass ...

Problem occurs when ngFor directive fails to show the newly added data in the source array

I'm encountering a peculiar issue with an ngFor loop that handles new data being added to the source array. The newly added elements are briefly displayed in the DOM but then disappear almost instantly. I've found a workaround by manually calling ...

Explore the next page on the API response by navigating to another page

In my next app, I have a versatile function called postAPI, which is used to send requests to the backend server. import Router from 'next/router'; export const postAPI = async ( endpoint, data = {}, headers = {}, method = 'POST&apos ...

Vercel Build Issue: It appears that the settings you are utilizing are intended for the 'client' module of '@sanity/preview-kit'

Hey there, I'm encountering a strange issue with Vercel deployment related to sanity. The specific error message during the Vercel build is: Error: It appears that you are using settings intended for '@sanity/preview-kit/client', such as &a ...

Managing the sequence of module loading in NodeJS

Consider this scenario: There are 3 files (modules) involved: app.js (async () => { await connectoDB(); let newRec = new userModel({ ...someprops }); await newRec.save(); })(); The app.ts serves as the entry point of the project. database ...

The Link tag in Next.js may have issues in production, but functions properly when tested locally

nex config babelrc home page Having issues with my link tag despite trying various solutions. I am utilizing Next Js with Ant design While running locally, the "Go-to Shop" button link functions properly (redirecting to the shop page). However, ...

Shifting Angular Component Declarations to a New Location

Here's a question that might sound silly: In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts. The goal is to structure my src/app directory as follows: src ...

What is the best way to run tests on this code using Jest?

Currently deep diving into ReactJS testing and struggling to tackle the component showcased below https://i.stack.imgur.com/jaEis.png Running jest with coverage reveals a gap from line 8 to 10 despite using data-testid for test execution, which seems pecu ...

The error message states that the object literal can only define properties that are known, and in this case, 'tailwindcss' is not recognized in the type 'NuxtConfig'

I'm facing an issue in my nuxt.config.ts file while trying to set up a custom tailwind css path. The error I keep encountering can be viewed here. Can someone guide me on how to properly create the custom tailwind css path in my nuxt.config.ts file? ...