From d9ad50d00bbf4eb36a9ffe63b2c7492c181f3d27 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 18:57:56 +0500 Subject: [PATCH 01/15] Improve Form Guide Contents --- docs/guides/building-forms.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 59b8d50caf733..d959e320185a6 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -1,9 +1,9 @@ --- -title: Building Serverless Web Forms with Next.js -description: This guide is tailored at creating serverless web forms with Next.js and Vercel. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. +title: Building Web Forms with Next.js +description: This guide is tailored at creating serverless web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. --- -# Building a Serverless Web Form with Next.js +# Building a Web Form with Next.js A web form has a **client-server** relationship. They are used to send data handled by a web server for processing and storage. The form itself is the client, and the server is any storage mechanism that can be used to store, retrieve and send data when needed. @@ -395,6 +395,6 @@ That's about it. After reading this guide, here's what you'll learn: - Validating forms data with and without JavaScript - Using Next.js Sereverless Functions to handle `req` and `res` from the client and server -Next.js and Vercel provide you with an all-in solution for hosting web forms and handling submissions with serverless functions. Use Next.js as the client for your JavaScript-based interaction and Vercel for its powerful serverless functions to handle the server. +Next.js provide you with an all-in solution for hosting web forms and handling submissions with serverless functions. Use Next.js as the client for your JavaScript-based interaction and Vercel for its powerful serverless functions to handle the server. For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app). From 5c8cdea7cd5b25ed24d584870dd1c6f1ff2558dc Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 19:33:09 +0500 Subject: [PATCH 02/15] Lint tests --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index d959e320185a6..db802b61d4b99 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -1,6 +1,6 @@ --- title: Building Web Forms with Next.js -description: This guide is tailored at creating serverless web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. +description: This guide is tailored at creating web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. --- # Building a Web Form with Next.js From 1ae22170fe2a61a048586a62f0c4ec050a1b1a88 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 19:33:29 +0500 Subject: [PATCH 03/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index db802b61d4b99..920ff5fb7ca11 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -1,5 +1,5 @@ --- -title: Building Web Forms with Next.js +title: Building Forms with Next.js description: This guide is tailored at creating web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. --- From e81df8f958ed037a94d8fe14b0be5996b67727aa Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 19:33:37 +0500 Subject: [PATCH 04/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 920ff5fb7ca11..6effdc75a357b 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -3,7 +3,7 @@ title: Building Forms with Next.js description: This guide is tailored at creating web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. --- -# Building a Web Form with Next.js +# Building Forms with Next.js A web form has a **client-server** relationship. They are used to send data handled by a web server for processing and storage. The form itself is the client, and the server is any storage mechanism that can be used to store, retrieve and send data when needed. From 7ee582f935bd76eca2bb488a90a1be2cee4d2981 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 20:54:49 +0500 Subject: [PATCH 05/15] Change Guides Section Position in Left Nav --- docs/guides/building-forms.md | 2 +- docs/manifest.json | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 6effdc75a357b..96cb8f52306c1 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -1,6 +1,6 @@ --- title: Building Forms with Next.js -description: This guide is tailored at creating web forms with Next.js. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. +description: Learn how to create forms with Next.js, from the form HTML element to advanced concepts with React. --- # Building Forms with Next.js diff --git a/docs/manifest.json b/docs/manifest.json index 56886a0a60b53..58e4ac62768c5 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -136,15 +136,6 @@ } ] }, - { - "title": "Guides", - "routes": [ - { - "title": "Building Forms", - "path": "/docs/guides/building-forms.md" - } - ] - }, { "title": "Middleware", "path": "/docs/middleware.md" @@ -165,6 +156,15 @@ "title": "Testing", "path": "/docs/testing.md" }, + { + "title": "Guides", + "routes": [ + { + "title": "Building Forms", + "path": "/docs/guides/building-forms.md" + } + ] + }, { "title": "Advanced Features", "routes": [ From 3b6aed41abf5f2fbf54c1756a09baf9926c32fb9 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 2 Feb 2022 23:16:52 +0500 Subject: [PATCH 06/15] Original images --- docs/guides/building-forms.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 96cb8f52306c1..84c1ef0ce74fd 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -7,7 +7,7 @@ description: Learn how to create forms with Next.js, from the form HTML element A web form has a **client-server** relationship. They are used to send data handled by a web server for processing and storage. The form itself is the client, and the server is any storage mechanism that can be used to store, retrieve and send data when needed. -This guide will teach you how to create a serverless web form with Next.js (client) and Vercel (server). +This guide will teach you how to create a web form with Next.js (client) and Vercel (server). ## Part 1: HTML Form @@ -28,7 +28,7 @@ Here's the syntax of a HTML form: The front-end looks like this: -![html forms](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009088/nextjs/guides/building-forms/html-forms.png) +![html forms](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/html-forms.png) The HTML `
` tag acts as a container for different `` elements like `text` field and submit `button`. Let's study each of these elements: @@ -81,7 +81,7 @@ The following example shows using these attributes: With these validation checks in place, when a user tries to submit an empty field for Name, it gives an error that pops right in the form field. Similarly, a roll number can only be entered if it's 10-20 characters long. -![form validation](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009088/nextjs/guides/building-forms/form-validation.jpg) +![form validation](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-validation.jpg) ### JavaScript-based Form Validation @@ -121,7 +121,7 @@ The following example shows using JavaScript to validate a form: The HTML [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tag is used to embed any client-side JavaScript. It can either contain inline scripting statements (as shown in the example above) or point to an external script file via the `src` attribute. This example validates the name and roll number of a user. The `validateFormWithJS()` function does not allow an empty name field, and the roll number must be at least three digits long. The validation is performed when you hit the Submit button. You are not redirected to the next page until the given values are correct. -![js-validation](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009089/nextjs/guides/building-forms/js-validation.jpg) +![js-validation](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/js-validation.jpg) #### Form Validation Using Regular Expressions @@ -145,7 +145,7 @@ The below example shows using the `pattern` attribute on an `input` element: The password form field must only contain digits (0 to 9) and lowercase alphabets (a to z). No other characters (#,$,&, etc.) are allowed. The rule in RegEx is written as `[a-z]{1,15}`. -![form-validate-regex](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009088/nextjs/guides/building-forms/form-validate-regex.jpg) +![form-validate-regex](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-validate-regex.jpg) > To learn more about HTML forms, check out the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Forms). @@ -188,7 +188,7 @@ Serverless functions perform a significant role in handling tasks like form subm - Offer faster deployments with greater flexibility (you don't have to manage any servers). - Reduce architecture and management costs. -### Next.js Form Serverless API Endpoint +### Next.js Form API Endpoint Both the client and the server will be built using Next.js. For the server part, create a serverless API where you will send the form data. @@ -235,7 +235,7 @@ You can now use `/api/form` relative endpoint inside the `action` attribute of t If you submit this form, it will submit the data to the forms API endpoint `/api/form`. The server then responds, generally handling the data and loading the URL defined by the action attribute, causing a new page load. So in this case you'll be redirected to `http://localhost:3000/api/form` with the following response from the server. -![form-no-js](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009087/nextjs/guides/building-forms/form-no-js.jpg) +![form-no-js](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-no-js.jpg) ## Part 3: Forms in Next.js @@ -268,7 +268,7 @@ This completes the basic structure of your Next.js-based form. > You can view the entire source code of [next-forms](https://github.com/vercel/next.js/tree/canary/examples/next-forms) example repo that we're creating here as a working example. Feel free to clone it and start right away. This demo is built with create-next-app, and you can preview the basic form CSS styles inside `/styles/global.css` file. -![forms with nextjs](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009088/nextjs/guides/building-forms/forms-with-nextjs.png) +![forms with nextjs](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/forms-with-nextjs.png) ## Part 4: Form Submission without JavaScript From 0c1196eb8a35ca971f99393e90bc681000b9d53a Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Thu, 3 Feb 2022 11:48:19 +0500 Subject: [PATCH 07/15] Fix images with Cloudinary --- docs/guides/building-forms.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 84c1ef0ce74fd..7bc46d6a41f4a 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -28,7 +28,7 @@ Here's the syntax of a HTML form: The front-end looks like this: -![html forms](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/html-forms.png) +![html forms](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/html-forms.png) The HTML `` tag acts as a container for different `` elements like `text` field and submit `button`. Let's study each of these elements: @@ -81,7 +81,7 @@ The following example shows using these attributes: With these validation checks in place, when a user tries to submit an empty field for Name, it gives an error that pops right in the form field. Similarly, a roll number can only be entered if it's 10-20 characters long. -![form validation](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-validation.jpg) +![form validation](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/form-validation.jpg) ### JavaScript-based Form Validation @@ -121,7 +121,7 @@ The following example shows using JavaScript to validate a form: The HTML [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tag is used to embed any client-side JavaScript. It can either contain inline scripting statements (as shown in the example above) or point to an external script file via the `src` attribute. This example validates the name and roll number of a user. The `validateFormWithJS()` function does not allow an empty name field, and the roll number must be at least three digits long. The validation is performed when you hit the Submit button. You are not redirected to the next page until the given values are correct. -![js-validation](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/js-validation.jpg) +![js-validation](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/js-validation.jpg) #### Form Validation Using Regular Expressions @@ -145,7 +145,7 @@ The below example shows using the `pattern` attribute on an `input` element: The password form field must only contain digits (0 to 9) and lowercase alphabets (a to z). No other characters (#,$,&, etc.) are allowed. The rule in RegEx is written as `[a-z]{1,15}`. -![form-validate-regex](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-validate-regex.jpg) +![form-validate-regex](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/form-validate-regex.jpg) > To learn more about HTML forms, check out the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Forms). @@ -235,7 +235,7 @@ You can now use `/api/form` relative endpoint inside the `action` attribute of t If you submit this form, it will submit the data to the forms API endpoint `/api/form`. The server then responds, generally handling the data and loading the URL defined by the action attribute, causing a new page load. So in this case you'll be redirected to `http://localhost:3000/api/form` with the following response from the server. -![form-no-js](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/form-no-js.jpg) +![form-no-js](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/form-no-js.jpg) ## Part 3: Forms in Next.js @@ -268,7 +268,7 @@ This completes the basic structure of your Next.js-based form. > You can view the entire source code of [next-forms](https://github.com/vercel/next.js/tree/canary/examples/next-forms) example repo that we're creating here as a working example. Feel free to clone it and start right away. This demo is built with create-next-app, and you can preview the basic form CSS styles inside `/styles/global.css` file. -![forms with nextjs](https://assets.vercel.com/image/upload/nextjs/guides/building-forms/forms-with-nextjs.png) +![forms with nextjs](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/forms-with-nextjs.png) ## Part 4: Form Submission without JavaScript From afd15bde93d34ef31f1d2d3fb3302c757e608716 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Thu, 3 Feb 2022 12:42:40 +0500 Subject: [PATCH 08/15] Improve guide contents --- docs/guides/building-forms.md | 54 ++++++++++++++++------------------- 1 file changed, 24 insertions(+), 30 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 7bc46d6a41f4a..fb49d89cfc8bf 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -7,7 +7,7 @@ description: Learn how to create forms with Next.js, from the form HTML element A web form has a **client-server** relationship. They are used to send data handled by a web server for processing and storage. The form itself is the client, and the server is any storage mechanism that can be used to store, retrieve and send data when needed. -This guide will teach you how to create a web form with Next.js (client) and Vercel (server). +This guide will teach you how to create a web form with Next.js. ## Part 1: HTML Form @@ -149,20 +149,7 @@ The password form field must only contain digits (0 to 9) and lowercase alphabet > To learn more about HTML forms, check out the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Forms). -## Part 2: Serverless Forms with Next.js and Vercel - -A serverless architecture, in literal terms, does involve servers. The difference is that the servers are managed and hosted in the cloud. - -There are many providers that offer this service such as: - -- [Vercel](https://vercel.com/docs/concepts/functions/introduction#serverless-functions) -- [Amazon Web Services](https://aws.amazon.com/lambda/) -- [Microsoft Azure](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview) -- [Google Cloud Platform](https://cloud.google.com/functions/) - -This part of the guide will focus on using Vercel. - -Vercel empowers you to write JavaScript Serverless functions and deploy them at its edge network. This significantly minimizes latency because your web application runs code in a serverless architecture as close to the end-user as possible. +## Part 2: Project Setup In the following section you will be creating forms in React using Next.js. @@ -176,15 +163,24 @@ Answer the questions to create your project, and give it a name, this example us Open the URL printed in the terminal to ensure that your app is running successfully. -## Setting up the Serverless Environment +## PART 3: Setting up a Serverless Backend -At the beginning of this guide, you learned that web forms have a client-server relationship. Now you will set up the server environment using Vercel. +A serverless architecture, in literal terms, does involve servers. The difference is that the servers are managed and hosted in the cloud. -Vercel supports out-the-box deployments of [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions), which you can code in your favorite backend languages (Node.js, Go, Python and Ruby). These functions take an HTTP request and return a response. +There are many providers that offer this service such as: + +- [Vercel](https://vercel.com/docs/concepts/functions/introduction#serverless-functions) +- [Amazon Web Services](https://aws.amazon.com/lambda/) +- [Microsoft Azure](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview) +- [Google Cloud Platform](https://cloud.google.com/functions/) + +Vercel empowers you to write JavaScript Serverless functions and deploy them at its edge network. This significantly minimizes latency because your web application runs code in a serverless architecture as close to the end-user as possible. + +It supports out-the-box deployments of [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions), which you can code in your favorite backend languages (Node.js, Go, Python and Ruby). These functions take an HTTP request and return a response. Serverless functions perform a significant role in handling tasks like form submission because: -- Serverless functions are event-based, and every time you submit a form, it triggers a new event. +- They are event-based, and every time you submit a form, it triggers a new event. - Offer faster deployments with greater flexibility (you don't have to manage any servers). - Reduce architecture and management costs. @@ -215,13 +211,13 @@ export default function handler(req, res) { } ``` -This serverless form `handler` function will receive the request `req` from the client (i.e. submitted form data). And in return, it'll send a response `res` as JSON that will have both the first and the last name. You can access this API endpoint at `http://localhost:3000/api/form` or replace the localhost URL with an actual Vercel deployment when you deploy. +This form `handler` function will receive the request `req` from the client (i.e. submitted form data). And in return, it'll send a response `res` as JSON that will have both the first and the last name. You can access this API endpoint at `http://localhost:3000/api/form` or replace the localhost URL with an actual Vercel deployment when you deploy. > Moreover, you can also attach this API to a database like MongoDB or Google Sheets. This way, your submitted form data will be securely stored for later use. For this guide, no database is used. Instead, the same data is returned to the user to demo how it's done. ### Form Submission without JavaScript -You can now use `/api/form` relative endpoint inside the `action` attribute of the form. You are sending form data to the server (serverless API at Vercel) when the form is submitted via `POST` HTTP method (which is used to send data). +You can now use `/api/form` relative endpoint inside the `action` attribute of the form. You are sending form data to the server when the form is submitted via `POST` HTTP method (which is used to send data). ```html @@ -237,9 +233,9 @@ If you submit this form, it will submit the data to the forms API endpoint `/api ![form-no-js](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/form-no-js.jpg) -## Part 3: Forms in Next.js +## Part 4: Configuring Forms in Next.js -You have created a server with Vercel via Serverless Functions. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). +You have created a back-end server for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). Here's the same form in a [React function component](https://reactjs.org/docs/components-and-props.html) written using [JSX](https://reactjs.org/docs/introducing-jsx.html). @@ -262,7 +258,7 @@ export default function Form() { Here's what changed: - The `for` attribute is changed to `htmlFor`. (Since `for` is a keyword associated with the "for" loop in JavaScript, React elements use `htmlFor` instead.) -- The `action` attribute now has a relative URL, the form API endpoint deployed at Vercel. +- The `action` attribute now has a relative URL which is the form API endpoint. This completes the basic structure of your Next.js-based form. @@ -270,7 +266,7 @@ This completes the basic structure of your Next.js-based form. ![forms with nextjs](https://assets.vercel.com/image/upload/dpr_auto,q_auto,f_auto/nextjs/guides/building-forms/forms-with-nextjs.png) -## Part 4: Form Submission without JavaScript +## Part 5: Form Submission without JavaScript JavaScript brings interactivity to our web applications, but sometimes you need to control the JavaScript bundle from being too large, or your sites visitors might have JavaScript disabled. @@ -282,8 +278,6 @@ There are several reasons why users disable JavaScript: Regardless of the reason, disabling JavaScript will impact site functionality partially, if not completely. -But with Vercel serverless functions, we can still use the forms without JavaScript, as seen in the **Form Submission without JavaScript** [section](#form-submission-without-javascript) above. - Next open the `next-forms` directory. Inside the `/pages` directory, create a file `no-js-form.js`. > **Quick Tip**: In Next.js, a page is a React Component exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the pages directory. Each page is associated with a route based on its file name. @@ -314,7 +308,7 @@ The form data will be submitted on the server as a request `req` to the form han > To improve the experience here, as a response you can redirect the user to a page and thank them for submitting the form. -## Part 5: Form Submission with JavaScript Enabled +## Part 6: Form Submission with JavaScript Enabled Inside `/pages`, you'll create another file called `js-form.js`. This will create a `/js-form` page on your Next.js app. @@ -393,8 +387,8 @@ That's about it. After reading this guide, here's what you'll learn: - The basic HTML `form` element - Understanding forms with React.js - Validating forms data with and without JavaScript -- Using Next.js Sereverless Functions to handle `req` and `res` from the client and server +- Using Next.js to handle `req` and `res` from the client and server -Next.js provide you with an all-in solution for hosting web forms and handling submissions with serverless functions. Use Next.js as the client for your JavaScript-based interaction and Vercel for its powerful serverless functions to handle the server. +Next.js provides you with an all-in solution for hosting web forms and handling submissions. Self-hosted, Next.js API routes can run on your Node.js server, deployed to Vercel. For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app). From 78269b6998dc6a59fb83bd9a3a2b9a8413926ae3 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Thu, 3 Feb 2022 15:07:54 +0500 Subject: [PATCH 09/15] Improve details about API endpoints --- docs/guides/building-forms.md | 33 ++++++--------------------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index fb49d89cfc8bf..451f367d07e92 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -163,30 +163,9 @@ Answer the questions to create your project, and give it a name, this example us Open the URL printed in the terminal to ensure that your app is running successfully. -## PART 3: Setting up a Serverless Backend +## PART 3: Setting up a Next.js Form API Endpoint -A serverless architecture, in literal terms, does involve servers. The difference is that the servers are managed and hosted in the cloud. - -There are many providers that offer this service such as: - -- [Vercel](https://vercel.com/docs/concepts/functions/introduction#serverless-functions) -- [Amazon Web Services](https://aws.amazon.com/lambda/) -- [Microsoft Azure](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview) -- [Google Cloud Platform](https://cloud.google.com/functions/) - -Vercel empowers you to write JavaScript Serverless functions and deploy them at its edge network. This significantly minimizes latency because your web application runs code in a serverless architecture as close to the end-user as possible. - -It supports out-the-box deployments of [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions), which you can code in your favorite backend languages (Node.js, Go, Python and Ruby). These functions take an HTTP request and return a response. - -Serverless functions perform a significant role in handling tasks like form submission because: - -- They are event-based, and every time you submit a form, it triggers a new event. -- Offer faster deployments with greater flexibility (you don't have to manage any servers). -- Reduce architecture and management costs. - -### Next.js Form API Endpoint - -Both the client and the server will be built using Next.js. For the server part, create a serverless API where you will send the form data. +Both the client and the server will be built using Next.js. For the server part, create an API endpoint where you will send the form data. Next.js offers a file-based system for routing that's built on the [concept of pages](/docs/basic-features/pages). Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated as an API endpoint instead of a page. This [API endpoint](/docs/api-routes/introduction) is going to be server-side only. @@ -235,7 +214,7 @@ If you submit this form, it will submit the data to the forms API endpoint `/api ## Part 4: Configuring Forms in Next.js -You have created a back-end server for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). +You have created a Nextjs API route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). Here's the same form in a [React function component](https://reactjs.org/docs/components-and-props.html) written using [JSX](https://reactjs.org/docs/introducing-jsx.html). @@ -382,13 +361,13 @@ The `handleSubmit()` function processes your form data through a series of steps ## Conclusion -That's about it. After reading this guide, here's what you'll learn: +This guide has covered the following: - The basic HTML `form` element - Understanding forms with React.js - Validating forms data with and without JavaScript -- Using Next.js to handle `req` and `res` from the client and server +- Using Next.js API routes to handle `req` and `res` from the client and server -Next.js provides you with an all-in solution for hosting web forms and handling submissions. Self-hosted, Next.js API routes can run on your Node.js server, deployed to Vercel. +Next.js provides you with an all-in solution for hosting web forms and handling submissions. You can self-host your Nextjs app or deploy it to a cloud provider, such as Vercel. For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app). From 929deb1f62a6c758396a3d9f2a4235b33f6887a3 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Thu, 3 Feb 2022 15:35:06 +0500 Subject: [PATCH 10/15] Fix small typos --- docs/guides/building-forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 451f367d07e92..735e892461467 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -214,7 +214,7 @@ If you submit this form, it will submit the data to the forms API endpoint `/api ## Part 4: Configuring Forms in Next.js -You have created a Nextjs API route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). +You have created a Next.js API route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). Here's the same form in a [React function component](https://reactjs.org/docs/components-and-props.html) written using [JSX](https://reactjs.org/docs/introducing-jsx.html). @@ -368,6 +368,6 @@ This guide has covered the following: - Validating forms data with and without JavaScript - Using Next.js API routes to handle `req` and `res` from the client and server -Next.js provides you with an all-in solution for hosting web forms and handling submissions. You can self-host your Nextjs app or deploy it to a cloud provider, such as Vercel. +Next.js provides you with an all-in solution for hosting web forms and handling submissions. You can self-host your Next.js app or deploy it to a cloud provider, such as Vercel. For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app). From 826df607b20d5ca25150783383e0d5c4df49521b Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Fri, 4 Feb 2022 13:13:44 +0500 Subject: [PATCH 11/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 735e892461467..4fb01348be39c 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -163,7 +163,7 @@ Answer the questions to create your project, and give it a name, this example us Open the URL printed in the terminal to ensure that your app is running successfully. -## PART 3: Setting up a Next.js Form API Endpoint +## Part 3: Setting up a Next.js Form API Route Both the client and the server will be built using Next.js. For the server part, create an API endpoint where you will send the form data. From b690c6e3952ec834bbcc2963c1d6114ec2f44d03 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Fri, 4 Feb 2022 13:13:49 +0500 Subject: [PATCH 12/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 4fb01348be39c..28f4a67354928 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -214,7 +214,7 @@ If you submit this form, it will submit the data to the forms API endpoint `/api ## Part 4: Configuring Forms in Next.js -You have created a Next.js API route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). +You have created a Next.js API Route for form submission. Now it's time to configure the client (the form itself) inside Next.js using React. The first step will be extending your knowledge of HTML forms and converting it into React (using [JSX](https://reactjs.org/docs/introducing-jsx.html)). Here's the same form in a [React function component](https://reactjs.org/docs/components-and-props.html) written using [JSX](https://reactjs.org/docs/introducing-jsx.html). From 620718ed021aacee5b7e0ee5ad16cf0fdf360be0 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Fri, 4 Feb 2022 13:13:57 +0500 Subject: [PATCH 13/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 28f4a67354928..4c55b795a0d01 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -366,7 +366,7 @@ This guide has covered the following: - The basic HTML `form` element - Understanding forms with React.js - Validating forms data with and without JavaScript -- Using Next.js API routes to handle `req` and `res` from the client and server +- Using Next.js API Routes to handle `req` and `res` from the client and server Next.js provides you with an all-in solution for hosting web forms and handling submissions. You can self-host your Next.js app or deploy it to a cloud provider, such as Vercel. From 6117021923f21f5c536707f1aeb459cd996c9a3a Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Fri, 4 Feb 2022 13:14:08 +0500 Subject: [PATCH 14/15] Update docs/guides/building-forms.md Co-authored-by: Lee Robinson --- docs/guides/building-forms.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 4c55b795a0d01..6dd1667ef7a48 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -368,6 +368,5 @@ This guide has covered the following: - Validating forms data with and without JavaScript - Using Next.js API Routes to handle `req` and `res` from the client and server -Next.js provides you with an all-in solution for hosting web forms and handling submissions. You can self-host your Next.js app or deploy it to a cloud provider, such as Vercel. For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app). From eff1920541bab035fe612fbd33f917daba9d9ab4 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 5 Feb 2022 13:01:57 -0600 Subject: [PATCH 15/15] lint-fix --- docs/guides/building-forms.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md index 6dd1667ef7a48..705b73aebe8b0 100644 --- a/docs/guides/building-forms.md +++ b/docs/guides/building-forms.md @@ -368,5 +368,4 @@ This guide has covered the following: - Validating forms data with and without JavaScript - Using Next.js API Routes to handle `req` and `res` from the client and server - For more details go through [Next.js Learn Course](https://nextjs.org/learn/basics/create-nextjs-app).