How to implement middleware in Next.js?

[0xdev24218]

Select Topic Area

Product Feedback

Body

This is my home page, I have a button that routes to a page called redirect, it creates a cookie while routing:

"use client";
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";

export default function Home() {
  const router = useRouter();

  const login = (e: { preventDefault: () => void }) => {
    e.preventDefault();

    console.log("login");
    Cookies.set("currentUser", "true");
    router.push("/redirect");
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <button onClick={(e) => login(e)}>click me</button>
    </main>
  );
}

Here's what I have so far in my middleware:

import type { NextRequest } from 'next/server'

 
export default function middleware(request: NextRequest) {
  let currentUser = request.cookies.get('currentUser')?.value
 
  if (!currentUser) {
    return Response.redirect(new URL('/', request.url))
  }
}

It checks if the cookie exists, if it doesn't I want it to redirect back to the homepage. I do have the file (middleware.ts) in my root folder. Sadly it isn't working and I'm not sure why. Spent the whole afternoon on yt, documentation, etc. I'm just a casual programmer so pardon me if this is too easy to figure out.

I'd appreciate any help

[0xsatoshi99]

This can be helpful for you.
https://nextjs.org/docs/app/building-your-application/routing/middleware

[0xdev24218]

Thanks