joplin-notes/joplin notion extension/Web Development/React/next/Advanced.md

Advanced

• server actions able to use forms in server component https://inv.in.projectsegfau.lt/watch?v=Yc2MJYwLqzs

• sending form data https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations https://www.youtube.com/watch?v=AbLAxs-7yl0
  for application/x-www-form-urlencoded just use

    <form action="/route/api" method="POST">
    	<input type="text" name="city">
    </form>
  
      const onSubmit = async (e) => {
    	e.preventDefault();
  
    	const formData = new FormData(e.currentTarget);
  
    	const response = await fetch("/addschool/api", {
    	  method: "POST",
    	  body: formData,
    	});
      };
  
  

  this will just Formdata which is not multipart but of urlencoded and field will be city

  for multipart form data

   <form onSubmit={onSubmit}>
  	<input type="text" name="city">
  </form>
  

• receiving form data

   import { redirect } from "next/navigation";
   import fs from "fs";
  
   export async function POST(request) {
     //   console.log("request: ", request.body);
  
     const formData = await request.formData();
  
     console.log(formData);
  
     const number = formData.get("contactNumber");
  
     const file = formData.get("imageAttachment");
  
     const fileBuffer = Buffer.from(await file.arrayBuffer());
  
     console.log("fileBuffer: ", fileBuffer);
  
     fs.writeFileSync(file.name, fileBuffer);
  
     console.log("number ", number);
  
     redirect("/addschool");
   }
  
  
  

• uploading file in vercel blob https://vercel.com/brads-projects-55888f01/~/stores/blob/store_I4WjQqMnSOkFDxWt/guides

• standalone builds node modules may contain lot of modules that are not required so

  1. configure next.config.js like this

     module.exports={
     	output : "standalone"
     }
     

  2. then at dist there is standalone folder is created go to that folder and do npm i and then go to root directory
  3. Remove the output standalone config and then build it again to have folder .next, copy this folder in standalone directory and when running npm run start it will run this build

• remove type errors in nextjs build

  // in next.config.js
  module.exports = {
   typescript: {
     // !! WARN !!
     // Dangerously allow production builds to successfully complete even if
     // your project has type errors.
     // !! WARN !!
     ignoreBuildErrors: true,
   },
  }