NextJS with ShadCN build Web for Consume API?

npx create-next-app@latest

# install shadcn and pnpm

npm i -g pnpm

pnpm dlx shadcn@latest init

return (
    
      
      
        
        
        
        {children}
      
    
  );

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowUpRight, CirclePlay } from "lucide-react";
import React from "react";
import Login02Page from "./login";

const Hero04 = () => {
  return (
    
      
        
          
            Just released v1.0.0
          
          
            Customized Shadcn UI Blocks & Components
          
          
            Explore a collection of Shadcn UI blocks and components, ready to
            preview and copy. Streamline your development workflow with
            easy-to-implement examples.
          
          
            
              Get Started 
            
            
               Watch Demo
            
          
        
        
          
        
      
    
  );
};

export default Hero04;

"use client";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z.object({
  username: z.string(),
  password: z.string().min(5, "Password must be at least 8 characters long"),
});

const Login02Page = () => {
  const [errorMessage,setErrorMessage]=useState("")
  const router = useRouter()
  const form = useForm>({
    defaultValues: {
      username: "",
      password: "",
    },
    resolver: zodResolver(formSchema),
  });

  const onSubmit = async (data: z.infer) => {
    setErrorMessage("")
    try{
      const response = await fetch('http://127.0.0.1:8000/api/login/',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        credentials: "include",
        body:JSON.stringify(data)
      })
      const result = await response.json()
      if(!response.ok){
        throw new Error(result.message || "Login Failed")
      }
      localStorage.setItem("adminToken",result.access)
      router.push("/menu")
      console.log(result.access );

    }
    catch(err:any){
      setErrorMessage(err.message)
    }


  };

  return (
    
      
        
          Log in to Shadcn UI Blocks
        



        
          
             (
                
                  Username
                  
                    
                  
                  
                
              )}
            />
             (
                
                  Password
                  
                    
                  
                  
                
              )}
            />
            
              Login
             
          
        

        
          
            Forgot your password?
          
          
            Don't have an account?
            
              Create account
            
          
        
      
    
  );
};



export default Login02Page;