Unable to access the login page

I am not able to access the login page I have created a file login.js but on navbar when I click on login button it shows 404 page not found.

Here is my code

navbar.js

import React from 'react';
import Link from 'next/link';

import {AiOutlineShopping} from "react-icons/ai"

import { Cart } from './';
import { useStateContext } from '../context/stateContext';

const Navbar = () => {
  const {showCart, setShowCart, totalQuantities} = useStateContext();
  return (
    <div className='navbar-container'>
      <p className='logo'>
        <Link href="/">Ecommerce</Link>
      </p>
      
      <p className='logo'>
        <Link href="/login">Login</Link>
      </p>

      {/* We are going to set the (setShowCart) to be set to (true) so when user click it opens. */}
      <button type='button' className='cart-icon' onClick={() => setShowCart(true)}>

        <AiOutlineShopping />
        <span className='cart-item-qty'>{totalQuantities}</span>
      </button>

      {showCart && <Cart />}
    </div>
  )
}

export default Navbar

login.js

import React from 'react'

const login = () => {
  return (
    <div>login</div>
  )
}

export default login

If you need any other file code, please tell I'll provide the code

This is photo of my Next.js file structure.