Next.JS-13 has encountered an inappropriate middleware in its App Based Routing functionality

I am currently working on developing a user authentication system that includes features for Login, Signup, and Logout. As part of this project, I have created a middleware.ts file in the src directory, which is located next to the app directory. Below is the content of my middleware.ts file along with its path: (path: src/middleware.ts)

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest)
{
    const path = request.nextUrl.pathname;

    const isPublicPath = path.includes('/login') || path.includes('/signup');

    const token = request.cookies.get('token')?.value || '';

    if(isPublicPath && token)
    {
        return NextResponse.redirect(new URL('/', request.nextUrl));
    }

    if(!isPublicPath && !token)
    {
        return NextResponse.redirect(new URL('/login', request.nextUrl));
    }
}

export const config = {
    matcher:[
        '/',
        '/profile',
        '/login',
        'signup',
    ],
}

Upon starting the server, I encountered the following errors:

source does not start with / for route {"source":"signup"}

Subsequently, another error occurred:

Invalid middleware found.

Despite attempting to resolve these issues by saving all changes and restarting the server, the problems persisted. Similar connectivity issues had arisen previously, but after making some adjustments, the server eventually connected successfully.

Answer №1

There appears to be a mistake in the matcher array within the configuration.

The correct value should be '/signup' instead of 'signup'.

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

Error in Vuetify 3.1.2 with Vue 3 and TypeScript: Unable to assign type 'boolean' to type 'never'

I am currently building a project using Vue 3 (version 3.2.45), Typescript (version 4.9.4), and Vuetify (version 3.1.2). When working with Vuetify components, I often encounter situations where I need to pass specific props for styling, positioning, or ma ...

Signing out in ExpressJS with the help of PassportJS and MongoStore

Currently utilizing PassportJS for authentication and MongoDB for session management. Within app.js: app.use(express.session({ store: new MongoStore({ db: mongoose.connection.db }) })); For logging out: app.get('/logout', func ...

Locate data using a derived attribute with Mongoose

I've structured my schema as follows: const billingSchema = mongoose.Schema({ PriceAmount: Number, Quantity: Number, Total: { type: Number, get: function() { return this.PriceAmount * this. ...

A guide to updating a table in Angular using an API response

My form allows me to select events from a drop-down list and choose a date. Depending on the selected date, it retrieves the number of events that occurred on that specific date. If I select an event and a date where events took place, the "All Events" sec ...

Tips for including a clickable button in an Angular textarea

I am looking for a solution to float a button to the top right corner of a text area in an Angular application. Below is my current code setup, but unfortunately, it does not achieve the desired result: <textarea matInput matInput rows="15" cols="40" ...

Mongoose automatically deletes expired data while retaining it in the database

Currently, my data saving and expiration process involves using a mongoose schema in the following way: var UserSchema = new Schema({ createdAt: { type: Date, expires: '1m' }, name: String, email: String }); The issue I'm facin ...

Using React.ReactNode as an argument in Storybook

This is a unique button component type that I have created import React from 'react' export type ButtonProps = { label: string; color?:'primary' | 'secondary' | 'tertiary'; size?:'mobile' | 'tabl ...

When considering Angular directives, which is more suitable for this scenario: structural or attribute?

In the process of developing an Angular 5 directive, I aim to incorporate various host views (generated from a component) into the viewContainer. However, I find myself at a crossroads as to whether I should opt for an attribute directive or a structural ...

Node.js and Mongoose not functioning properly in collaboration

Searching for a user based on matching first and last names. router.post('/post/user/search/tag', function (req, res) { function getRegex(_query) { return { $regex: '^' + _query + '|.*' + _query, $optio ...

What is the purpose of the 'unique' keyword in TypeScript?

While coding in the TypeScript playground, I stumbled upon a situation where the term unique seems to be reserved. However, I haven't been able to find any official documentation regarding this. https://i.stack.imgur.com/eQq5b.png Does anyone know i ...

Unexpected runtime error when using Prisma with NodeJS and Express

While starting the server, I encounter an error message saying [ERROR] 14:48:46 Error: Cannot find module './runtime/library'. The stack trace points to the directory named prisma. Even after executing npx prisma generate, the directory called p ...

Guide on validating an email through a 6-digit code using Flutter, Node.js, and MongoDB

My goal is to create a registration process where users enter their email and password on a screen. After clicking "register", they should receive an email with a random 6-digit code for verification on the next page. I have everything set up, but I' ...

The Observable<T> generic type must be provided with one type argument

I encountered the following 3 errors while working with the Angular 2 (TypeScript) code below. Can you provide suggestions on how to resolve them? import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NgModule, Com ...

The 'HTMLDivElement' type does not include the property 'prepend' in Typescript

When working with a typescript method, the following code snippet is used: some_existing_div.prepend(some_new_div) This may result in an error message: [ts] Property 'prepend' does not exist on type 'HTMLDivElement'. However, despi ...

What port does MongoDB use if it's already using 65500, and which port is typically used for HTTP

Assuming the Mongo server is running on port 65500, on what port can I access a simple HTTP rest service? Let's consider this scenario: MongoDB offers a straightforward HTTP interface that displays essential information for administrators. This int ...

Utilize an API call to fetch data and seamlessly showcase it on the webpage using Vue.js

I have created an API and defined it in my TypeScript file const Book = { async getBookType(intID: string): Promise<Book[]> { // const intId = API.Product.getCurrentId(); const intId = ''; const response = await h ...

Whenever the route changes in Angular, the components are duplicated

Whenever I switch routes in my Angular application, such as going from home to settings and back to home, all the variables seem to be duplicated from the home page and are never destroyed. I noticed that I created a loop in the home component that displa ...

Arranging a dictionary by its keys using Ramda

My task involves manipulating an array of items (specifically, rooms) in a program. I need to filter the array based on a certain property (rooms with more than 10 seats), group them by another property (the area the room is in), store them in a dictionary ...

What is the resolution if I need to utilize a property that is untyped?

Transitioning to TypeScript from plain old JavaScript is a step I'm taking because I believe it offers significant advantages. However, one drawback that has come to light is that not all attributes are typed, as I recently discovered. For instance: ...

Switching class on a specific element in Angular 2

My element list appears like this: <ul *ngFor="let period of periodsDate"> <li [class.show]="isShown" (click)="toggleClass()"> <a>{{ period.id }} </a> </li> </ul> ...