My Code

  < script type = "text/javascript" >     function readURL (res) {         if (res) {             var reader = new FileReader () ;             reader . onload = function (e) {                 console. log (e . target . result);                 $( '#blah' ) . attr ( 'src' , e . target . result);             }             reader . readAsDataURL (res);         }     }   //this is for image preview while uploadding function view (){   const file = document. getElementById ( 'imgInp' ) . files[ 0 ];   console. log (file); //this is image compress   imageConversion . compressAccurately (file, 100 ) . then (res => {     //The res in the promise is a compressed Blob type (which can b...

  <! DOCTYPE html > < html >     < head >         < meta charset = "utf-8" >         < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >         < title >compose Blog</ title >         < meta name = "description" content = "" >         < meta name = "viewport" content = "width=device-width, initial-scale=1" >           <!-- CSS only -->         < link rel = "stylesheet" href = "/dashCss/main.css" >         < link rel = "stylesheet" href = "/dashCss/createBlog.css" >           <!-- tailwindcss -->         <!-- <script src="https://cdn.tailwindcss.com"></script> -->           <!-- summarnote cdn -->     < link ...

 making a flolder in api  like this , api > auth>[...nextauth].js import NextAuth from "next-auth" import { verifyPassword } from '../../../lib/auth' ; import CredentialsProvider from 'next-auth/providers/credentials' ; import clientPromise from "../../../lib/mongodb" import User from '../../../model/user' // For more information on each option (and a full list of options) go to // https://next-auth.js.org/configuration/options export default NextAuth({   callbacks : {     session: async ({ session , token }) => {       if ( session ?. user ) {         session . user . id = token . uid ;       }       return session ;     },     jwt: async ({ user , token }) => {       if ( user ) {         token . uid = user . id ;       }       return token ;     },   },  ...

MongoDB connection with Next js  In model folder create a file user.js for schema import mongoose from 'mongoose' const UserSchema = new mongoose . Schema ({   name : String,   email : String }) module.exports = mongoose . models . User || mongoose . model ( 'User' , UserSchema) create a file in root lib. MongoDB.js import mongoose from 'mongoose' const MONGODB_URI = "mongodb://localhost:27017" if ( ! MONGODB_URI) {   throw new Error (     'Please define the MONGODB_URI environment variable inside .env.local'   ) } /**  * Global is used here to maintain a cached connection across hot reloads  * in development. This prevents connections growing exponentially  * during API Route usage.  */ let cached = global. mongoose if ( ! cached) {   cached = global. mongoose = { conn : null , promise : null } } async function dbConnect () {   if (cached . conn) {     return cached . conn   } ...

  form handler 1 step  const [user ,setUser] = useState({   email : "" ,   password : '' }) // 2 step  < input onChange = { handleChange } value = { user . email } id = "email-address" name = "email" type = "email" autocomplete = "email" required > //3 step           < form onSubmit = { dataHandler } class = "mt-8 space-y-6" action = "#" method = "POST" > 4 step function handleChange (evt) {   const value = evt . target . value;   setUser({     ... user ,     [ evt . target . name ]: value   }) ; 5 step const dataHandler = (e) => {   e . preventDefault () console. log (user) }