Validate forms in React using the libraries formik and yup

A Step-by-Step Guide to Handling Form Validation in React

We&#8217;ll implement React Hook Form custom validations and schema validations using yup.

React Hook Form Validation with Complete Examples

Compare the technical and performance differences between Formik and the React Hook Form to see which form builder is right for you.

React Hook Form vs. Formik: A technical and performance comparison

Next.Js Forms: All The Resources You Need To Build Amazing And Secure Forms

Learn how to create forms with Next.js, from the form HTML element to advanced concepts with React.

Building Forms with Next.js

HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state.

React Forms Dodumentation

Today we are looking at another well-used element of web applications: Forms. And to be precise, how to use forms in Next.js.

How to use forms in Next.js

In this guide, we’ll create a form that we can use across our product. We’ll start with something simple and slowly add in more complexity like preventing the user from navigating away with unsaved changes.

Creating Advanced Reusable Forms

//Note: <a href="https://youtu.be/QeHuj0Twn7E" target="_blank" rel="noreferrer noopener">Watch the video here</a>



Dear Next.Js Aficionado,



Until now, we&#8217;ve talked about what your portfolio website should look like and that web developers aren&#8217;t web designers, so they need ready-to-use templates if they want to create something beautiful.



We analyzed some examples of good portfolio websites and chose an HTML template or UI kit.



Now, it&#8217;s time to set up our project.



<h2 class="wp-block-heading">Installing Next.Js Fast &amp; Easily</h2>



Hopefully, the guys behind this framework have made it super easy for us to install it and get going.



We just open a new terminal, navigate to the parent folder where we would like to create our project, and we run the following command:



<pre class="wp-block-code"><code>npx create-next-app@latest</code></pre>


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-1366x768.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-1024x576.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-768x432.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-428x241.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-150x84.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/installing-nextjs-1024x576.jpg" width="1024" height="576" class="img-fluid" alt="" /></picture>


Ok, let&#8217;s open the project in our favorite code editor.



As you can see, we have several files and folders in the project folder.



I&#8217;m going to review them briefly…



First, we have a node_modules folder. It&#8217;s the home of all the third-party libraries we will install in the future. Every time you install something &#8211; let&#8217;s say caching library for optimizing the number of requests your app makes to external API &#8211; the library files will be downloaded and saved in their folder under <code>node_modules</code>.


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-1366x767.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-1024x575.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-768x431.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-428x240.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-150x84.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-project-structure-1024x575.jpg" width="1024" height="575" class="img-fluid" alt="" /></picture>


Next, there&#8217;s a folder named <code>public</code>.



It&#8217;s the preferred place for all the files we want to be freely accessible.



For security reasons, we want most of our project files not to be freely accessible. But some static ones like images, SVG graphics, fonts, and others are meant to be public, so their proper place is in this folder.



We also have a folder named <code>styles</code>…



Here is the home for all of our CSS files. There&#8217;s a globals.css in there. Here we put styles that apply to many components and the app. And, of course, we can create a CSS file for every component we make.



And finally, we have the <code>pages</code> folder…


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-1366x772.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-1024x579.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-768x434.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-428x242.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-150x85.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-pages-folder-1024x579.jpg" width="1024" height="579" class="img-fluid" alt="" /></picture>


Here we put all files that represent individual pages of our website. So our website&#8217;s index page is this one. If we open it, we&#8217;ll discover a standard react component named Home. If we want to make an &#8220;about me&#8221; page, we can do it by creating a new javascript file named about-me.js.



Now, if we run the application for testing purposes with <code>npm run dev</code>…



We can open that page in our browser.



In a later video, we will talk more about how routing happens in Next.js, but it&#8217;s simple as that. You create files that represent pages, and they just start working in your browser.



<h2 class="wp-block-heading">Short Review Of The Project&#8217;s Files</h2>



Ok, we&#8217;ve talked about the available folders. Let&#8217;s review the available files for a minute.



We have a <code>yarn.lock</code> file. It&#8217;s generated by the javascript package manager Yarn — obviously, this package manager is the preferred choice of the guys behind Next.js.


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-1366x769.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-1024x577.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-768x432.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-428x241.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-150x84.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/yarn-lock-1024x577.jpg" width="1024" height="577" class="img-fluid" alt="" /></picture>


Let&#8217;s install it and start using it instead of npm.



We run the command: <code>npm install -g yarn</code>. I already have it installed, so nothing changed on my side. But if you didn&#8217;t have it on your computer, now it&#8217;s available.



We&#8217;ll use yarn from now on.



So the <code>yarn.lock</code> file is a special file that we never edit. It&#8217;s managed by the package manager, and it holds information about the third-party libraries we&#8217;ve installed, their dependencies, and their exact versions.



The idea is that if we want to run our app on a machine different than ours, let&#8217;s say on a server; then we&#8217;ll copy all app&#8217;s files and folders except node_modules.



Often this folder is huge. It is huge in size and the number of files, so if every project on a platform like GitHub has it around, it will need more storage space.



Because the files there don&#8217;t change from project to project, they don&#8217;t get uploaded.



Instead, every time we install our app on a new machine, they get downloaded anew.



To download the exact same files, we need a list of them; thus, we have a <code>yarn.lock</code>.



Besides it, we have a <code>packge.json</code> file. It&#8217;s something like a human-readable register of all project dependencies. Here we define the project&#8217;s name, version, and custom scripts, etc&#8230;


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-1366x772.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-1024x578.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-768x434.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-428x242.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-150x85.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/package-json-1024x578.jpg" width="1024" height="578" class="img-fluid" alt="" /></picture>


Let&#8217;s talk about them for a moment…



If our app is ready to go online, we need to build it, so we run the command:



<pre class="wp-block-code"><code>yarn build</code></pre>



It starts to bundle the files, minify them, and do its other magic that makes Next.Js such a good React framework.



When it&#8217;s finished building, we can start the app just like it will be started in a production environment by running the command:



<pre class="wp-block-code"><code>yarn start</code></pre>



But while we&#8217;re developing our app, we&#8217;ll not build it if we want it running.



We&#8217;ll use the command: 



<pre class="wp-block-code"><code>yarn dev</code></pre>



Now we can make changes, create new files and apply new CSS styles, and everything we do will be visible in the browser right away, thanks to the so-called &#8220;hot-reload&#8221; feature of Next.js.



<h2 class="wp-block-heading">And what about the script named &#8220;lint&#8221;?</h2>



It&#8217;s a really useful one. But what is it?



&#8220;Linting&#8221; your code is the automated process of analyzing it for obvious errors that can be detected without running it. Some errors happen only on run time, so no machine can notice them beforehand, but others can be caught just by mechanically applying the language&#8217;s rules.



So when you run the command <code>yarn lint</code>, your code gets analyzed for warnings and errors. Let&#8217;s see what happens if there is an error…



I will add an anchor, but I will miss on purpose to properly close the tag.



Then I will run the command…



As you can see, it successfully detected the missing closing tag.



If you&#8217;re curious about the rules, you can find them all on this <a href="https://nextjs.org/docs/basic-features/eslint" target="_blank" rel="noreferrer noopener">documentation page</a>.



Ok, enough discussing the <code>package.json</code> file.



<h2 class="wp-block-heading">What about next.config.js?</h2>


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-1366x772.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-1024x579.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-768x434.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-428x242.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-150x85.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-configs-1024x579.jpg" width="1024" height="579" class="img-fluid" alt="" /></picture>


It&#8217;s a js file that holds configs related to Next.js.



I not gonna tell you what you can put here because you won&#8217;t remember it. I don&#8217;t remember myself.



Basically, if you need to configure the framework in some specific way, you read the official documentation.



Right now, we don&#8217;t need to change anything, so we&#8217;ll leave this file unchanged.



The <code>.eslintrc.json</code> file is the place to configure ESLint. For example, let&#8217;s say you want a style tag in your component. A rule states you can&#8217;t put it there, but you can turn it off by adding it right here with a value of &#8220;off.&#8221;


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-1366x768.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-1024x576.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-768x432.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-428x241.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-150x84.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/08/nextjs-eslint-1024x576.jpg" width="1024" height="576" class="img-fluid" alt="" /></picture>


And finally, we have <code>README.md</code>. It&#8217;s self explementary what we use it for, so I won&#8217;t waste time talking about it. If your repository is not public, perhaps you don&#8217;t need such a file.



Ok, that&#8217;s it…



It turns out it&#8217;s pretty easy to install Next.js and start coding. That&#8217;s why I love it and use it for almost every project. In the following video, we will finally begin coding. We&#8217;ll take the HTML template we chose earlier and turn it into a Next.Js template.



Let&#8217;s wrap up this section:



<ul><li>We installed Next.Js and the package manager yarn</li><li>We reviewed the project structure &#8211; its folders and files</li><li>And we talked about the available scripts in package.json</li></ul>



Cheers, Sashe Vuchkov

NextJs Adventures

Latest

Recent Posts