I am using Supabase with Next.js. The createClientComponentClient() is unable to read env variables

I am new to Next.js and Supabase. As part of a tutorial, I am using Supabase and Next.js. Details available here.

While replicating this code, I see that the createClientComponentClient() or the handleSubmit function is unable read the local environment variables. Here are the files.

# In .env.local
NEXT_PUBLIC_SUPABASE_URL=https://myprojecturl.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<mykeyhere>

// In page.js

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

// Components
import AuthForm from "../AuthForm";

export default function Signup() {
    const router = useRouter();
    const [error, setError] = useState("");
    const handleSubmit = async (e, email, password) => {
        e.preventDefault();
        setError("");
        console.log(
            `in handleSubmit(), reading env vars: ${process.env.NEXT_PUBLIC_SUPABASE_URL} and ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`
        ); // This is returning undefined for both values.
        const supabase = createClientComponentClient();
        const { error } = await supabase.auth.signUp({
            email,
            password,
            options: {
                emailRedirectTo: `${location.origin}/api/auth/callback`,
            },
        });

        if (error) {
            setError(error.message);
        }

        if (!error) {
            router.push("/verify");
        }
    };
    return (
        <main>
            <h2 className="text-center">SignUp</h2>
            <AuthForm handleSubmit={handleSubmit} />
            {error && <div className="error">{error.message}</div>}
        </main>
    );
}

And this is the AuthForm.js component.

// In AuthForm.js

"use client";
import { useState } from "react";

export default function AuthForm({ handleSubmit }) {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    return (
        <form onSubmit={(e) => handleSubmit(e, email, password)}>
            <label>
                <span>Email:</span>
                <input
                    type="email"
                    onChange={(e) => setEmail(e.target.value)}
                    value={email}
                    required
                />
            </label>
            <label>
                <span>Password:</span>
                <input
                    type="password"
                    onChange={(e) => setPassword(e.target.value)}
                    value={password}
                    required
                />
            </label>
            <button className="btn-primary">Submit</button>
        </form>
    );
}

When I submit the credentials in the signup form, I get the following error.

Unhandled Runtime Error
Error: either NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables or supabaseUrl and supabaseKey are required!

Please help.

1. I have compared the code base with the one shared by the tutor. The code is accurate.
2. I have matched the versions of both the supabase modules and reinstalled the packages. The result is the same.
3. I have tried to read the local environment variables in the submit function. The result is 'undefined' for both the variables.