molebox

molebox

Writing docs and code

Member Since 5 years ago

@vercel, Örnsköldsvik, Sverige

Experience Points
165
follower
Lessons Completed
183
follow
Lessons Completed
515
stars
Best Reply Awards
135
repos

1300 contributions in the last year

Pinned
⚡ A blog powered by Next.js, mdx-bundler and Chakra-ui
⚡ A node CLI for querying the Twitter spaces API.
⚡ A product page made with snowpack, mdx, chakra and three js
⚡ A Gatsby ecommerce starter setup with Stripe integration and Sanity for content management.
⚡ A short tutorial on how to seed a Postgres DB using Node
⚡ A totally minimal digital garden
Activity
Jan
26
1 day ago
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Lets remove the videos for now 🙏

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Lets remove the videos for now 🙏

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Here we are linking to the current section this paragraph is in. Should it link somewhere else?

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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

I wonder if the conclusion should first talk about the fact that we have learnt how to build forms in html, then react, then serverless etc... The conclusion takes in the whole guide, and only a small section was to do with vercel ☺️

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
Next open the `next-forms` directory. Inside the `/pages` directory, create a file `no-js-form.js`.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Isnt this a part of Part 2: [SERVER] Serverless Forms with Next.js and Vercel ? If so we should make this an H3, and correct the following headings within this section of the guide

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
Create a new Next.js app. You can use the [create-next-app](https://nextjs.org/docs/getting-started#setup) for a quick start. In your command line terminal, run the following:
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Im not 100% sure, but something more like the following:

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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

I find this confusing as the above section Part 2 says that we are going to create a serverless function using Vercel. In actual fact we have created an api route using next.js. Once deployed to vercel, it would use vercel infra, but currently its just an api route. I wonder if we need to re-work, or re-name the above section? 🤔

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Shall we move Vercel to the front of this list? 😅

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
In the following section you will be creating forms in React using Next.js.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
The below example shows using the `pattern` attribute on an `input` element: 
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
JavaScript validation with Regular Expressions uses the `pattern` HTML attribute. A regular expression (commonly known as RegEx) is an object that describes a pattern of characters. You can only apply the `pattern` attribute to the `<input>` element. This way, you can validate the input value using Regular Expressions (RegEx) by defining your own rules. Once again, if the value does not match the defined pattern, the input will give an error.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
There are several reasons why users disable JavaScript:

- Addressing bandwidth constraints
- Increasing device (phone or laptop) battery life
- For privacy so they won’t be tracked with analytical scripts

Regardless of the reason, disabling JavaScript will impact site functionality partially, if not completely.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

This example has the same fields as the above one, but they are in different places. Can we keep them consistent? Its easier to read and scan if we are incrementally adding content to the code blocks, rather than swapping the field values

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Where is the Last Name input? I see only Name

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Can we try to not use the word "user" if possible. I know it's tough sometimes. Perhaps client and server could be used here instead?

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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
Though both of these types are equally important, this guide will focus on client-side validation only.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
The password form field must only contain digits (0 to 9) and lowercase alphabets (a to z). No other special characters (#,$,&, etc.) are allowed. The rule in RegEx is written as `[a-z]{1,15}`.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
A process that checks if the information provided by a user is correct or not. Form validation also ensures that the provided information is in the correct format (e.g. there's an @ in the email field). These are of two types:
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Let's try and spell it out as much as possible. If im asking, other will too. 😌

The following example shows using these attributes:
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
The following example shows using JavaScript to validate a form:
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
This guide will teach you how to create a serverless web form with Next.js (client) and Vercel (server).
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Can we squeeze in some keywords here?

open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox
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.
open pull request

molebox wants to merge vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
molebox
molebox

Is this correct? Do you have to use return here?

pull request

molebox merge to vercel/next.js

molebox
molebox

Building web forms with Next.js and Vercel

Feature

  • Related issues linked using #29602
  • Related issues linked using #32669
  • Documentation added

Documentation / Examples

  • Make sure the linting passes by running yarn lint
Previous