NextJS with ShadCN build Web for Consume API?

install nextjs npx create-next-app@latest # install shadcn and pnpm npm i -g pnpm pnpm dlx shadcn@latest init install sidebar default layout for dashboard pnpm dlx shadcn@latest add sidebar return ( {children} ); build the landing page 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; login.tsx "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'}, 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;

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'},
        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;

Related Posts

Gemini 2.0: Flash, Flash-Lite and Pro

Feb 5, 2025  0

[Tutorial] Chapter 3: Task Data Management

Feb 19, 2025  0

How I Manage My SaaS Product’s APIs Without Losing My Mind

Mar 21, 2025  0