initial

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

@@ -0,0 +1,93 @@
+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
+  ```jsx
+	<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
+	
+	```html
+	 <form onSubmit={onSubmit}>
+		<input type="text" name="city">
+	</form>
+	```
+	
+- receiving form data 
+   ```js
+	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
+		```js
+		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
+	 ```js
+  // 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,
+	  },
+	}
+	```
+	
+