{"id":372826,"date":"2023-03-24T10:52:49","date_gmt":"2023-03-24T10:52:49","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=372826"},"modified":"2024-10-23T09:49:53","modified_gmt":"2024-10-23T09:49:53","slug":"mui-in-nextjsreact","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/","title":{"rendered":"Implementation of Material UI in Nextjs"},"content":{"rendered":"\n<p>In this post, we will learn about the most widely used UI Component library <a href=\"https:\/\/mui.com\/material-ui\/getting-started\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI (Material UI)<\/a> in React. You can also checkout our another blog, where we using <a href=\"https:\/\/webkul.com\/blog\/tailwind-css-with-material-ui\/\">tailwind css in material-ui<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is MUI?<\/h2>\n\n\n\n<p>Material UI is a library of React UI components that implements Google&#8217;s Material Design. For reference, you can check MUI.<\/p>\n\n\n\n<p>Material UI is an open-source React component library that implements Google&#8217;s&nbsp;<a href=\"https:\/\/m2.material.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Design<\/a>.<\/p>\n\n\n\n<p>In addition, it includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why should we opt for MUI?<\/h2>\n\n\n\n<p>Since there are plenty of choices when going forward to use a FrontEnd UI library, then why choose Material UI over the rest?<\/p>\n\n\n\n<p>Here are the following advantages I found during the R&amp;D while I was going through the dilemma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Salient Features &#8211;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Scalability<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scalability is a vital product design factor. It is the major point where MUI is far ahead of the rest of UI libraries as it provides scalability and customization hand in hand.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you\u2019re building a design system from scratch, designers must design, prototype, and test new components before scaling the product. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With MUI\u2019s comprehensive UI library, designers can search for the components they need to prototype and scale right away.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Engineers can copy\/paste the identical React components from MUI and customize them to the designer\u2019s specifications.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MUI X<\/strong>: includes a library of advanced React components teams can use to scale complex products even faster, including data grids, date pickers, charts, pagination, filtering, and more.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Accessibility<\/strong>:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Those experienced with setting up a design system will know the time and money it takes to ensure every component passes\u00a0<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">accessibility standards<\/a>. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MUI\u2019s designers have taken great care in designing components to meet\u00a0<a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/#intro\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WCAD 2.0 accessibility guidelines<\/a>\u00a0\u2013 reducing the work for researchers and designers.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It\u2019s important to note that even when you design interfaces using accessible components, you must still test navigation and user flows to ensure the product as a whole meets accessibility standards.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customizability:<\/strong>\u00a0The library includes an extensive set of intuitive customizability features.\u00a0<a href=\"https:\/\/mui.com\/store\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The templates<\/a>\u00a0in our store demonstrate how far you can go with customization.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ship faster:<\/strong>\u00a0Over 2,500 open-source\u00a0<a href=\"https:\/\/github.com\/mui\/material-ui\/graphs\/contributors\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">contributors<\/a>\u00a0have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel\u2014we&#8217;ve got your UI covered.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Beautiful by default:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00a0We&#8217;re focusing on precisions &amp; are very careful about our implementation of\u00a0<a href=\"https:\/\/m2.material.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Design<\/a>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensuring that every Material UI component meets the highest standards of form and function, but diverges from the official spec where necessary to provide multiple great options.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Add on Features &#8211;<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Faster Time-to-Market<\/strong>:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li> In today\u2019s highly competitive tech landscape, time-to-market is a metric that organizations always seek to optimize. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A component library gives designers and developers a massive headstart with thoroughly tested UI elements ready to go.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Easy Maintenance<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A component library like\u00a0<a href=\"https:\/\/mui.com\/getting-started\/usage\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI comes with detailed documentation<\/a>\u00a0for installing, using, updating, and customizing components. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Designers and engineers can use this framework to maintain the organization\u2019s design system, making it easier to establish governance systems and protocols.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MUI also provides how-to guides for migrating from one version to the next. So, organizations can take advantage of the latest UI styles, technologies, and trends whenever MUI releases an update.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Trusted by thousands of organizations:<\/strong>\u00a0<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Material UI has the largest UI community in the React ecosystem.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It&#8217;s almost as old as React itself\u2014its history stretches back to 2014\u2014and we&#8217;re in this for the long haul. You can count on the community&#8217;s support for years to come (e.g.\u00a0<a href=\"https:\/\/insights.stackoverflow.com\/trends?tags=material-ui\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Stack Overflow<\/a>).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Furthermore, there is an endless list of the advantages and ease MUI provides. You can go through more.<\/li>\n<\/ul>\n\n\n\n<p>Besides, you can also refer to detailed comparision, major Differences, and pros and cons of the most widely used reliable FrontEnd Libraries via this <a href=\"https:\/\/www.upgrad.com\/blog\/bootstrap-vs-material\/#:~:text=While%20Bootstrap%20is%20known%20for,stylish%20and%20modern%2Dlooking%20apps.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">reference<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installation Of MUI<\/h2>\n\n\n\n<p>Installing React Hook Form only takes a single command and you\u2019re ready to roll.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ with npm\nnpm install @material-ui\/core\n\n\/\/ with yarn\nyarn add @material-ui\/core<\/pre>\n\n\n\n<p>In addition, if you are using react version above 16.8.0 you may get an error &#8220;Could not resolve dependency:&#8221; on installing- <code>material-ui<\/code>, to start with the library &amp; install <code>material-ui<\/code>\/core. <\/p>\n\n\n\n<p>Use the cmd <strong>npm install &#8212;<code>legacy-peer-deps<\/code><\/strong>. Finally, you can proceed with the installation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Syntax<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ Stepper Component\nimport {Typography,Stepper,Step,StepLabel,Button} from &quot;@material-ui\/core&quot;;\n\n\/\/ Form Components\nimport { Button,TextField} from &#039;@material-ui\/core&#039;;\n\n\/\/index page\nimport {CssBaseline,Container,Paper,Box} from &quot;@material-ui\/core&quot;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Some Common Components In MUI<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CssBaseLine<\/strong>: It comes under the Utils Categoryin Compoents. The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong>: The container centers your content horizontally. It&#8217;s the most basic layout element.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Paper<\/strong>:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In Material Design, the physical properties of paper are translated to the screen.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The background of an application resembles the flat, opaque texture of a sheet of paper, and an application&#8217;s behavior mimics paper&#8217;s ability to be re-sized, shuffled, and bound together in multiple sheets.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Box<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Box comes under the Layout Category of UI Components. The Box component serves as a wrapper component for most of the CSS utility needs. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Box component packages\u00a0<a href=\"https:\/\/mui.com\/system\/properties\/\" rel=\"nofollow\">all the style functions<\/a>\u00a0that are exposed in\u00a0<code>@mui\/system<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>TextField<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text Fields let users enter and edit text. It allows users to enter text into a UI. They typically appear in forms and dialogs.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The\u00a0<code>TextField<\/code>\u00a0wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Button<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is an Input Component. Buttons allow users to take actions, and make choices, with a single tap.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:<br>\n<ul class=\"wp-block-list\">\n<li>Modal windows<\/li>\n\n\n\n<li>Forms<\/li>\n\n\n\n<li>Cards<\/li>\n\n\n\n<li>Toolbars<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Typography<\/strong>:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography is a Data-Display Component. The Typography component makes it easy to apply a default set of font weights and sizes in your application. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This component uses the\u00a0<code>variantMapping<\/code>\u00a0prop to associate a UI variant with a semantic element. It&#8217;s important to realize that the style of a typography component is independent of the semantic underlying element.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Stepper<\/strong>: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stepper is a Navigation Component. Steppers convey progress through numbered steps. It provides a wizard-like workflow. To display progress through a sequence of logical and numbered steps we use steppers.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>See the documentation below for a complete reference to all of the props and classes available to the components mentioned here:<\/li>\n\n\n\n<li><code>&lt;MobileStepper \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;Step \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;StepButton \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;StepConnector \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;StepContent \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;StepIcon \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;StepLabel \/&gt;<\/code><\/li>\n\n\n\n<li><code>&lt;Stepper \/&gt;<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Check out all Components Available in MUI &#8211;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For references and get familiar with other Components in MUI, you can refer to <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">Component APIs<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Let\u2019s take a small example to understand<\/strong>&nbsp;&amp; implement MUI \u2013<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To create Linear Stepper in Nextjs (React) using the MUI library.<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To brief the Project, in this example we are using the MUI library to make a Stepper that has Steps coming from an array of steps, moreover, we have Step Content that gets shown as per the Active Step running. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, we pass 3 different Forms as Child Components to the switch cases which are shown in the Active Step content.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Another reward to the readers, who have read my blog on <a href=\"https:\/\/webkul.com\/blog\/implementation-of-useform-hook-in-nextjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to implement UseForm in Nextjs| React<\/a> we are using the useForm hooks, its props, and methods once again in the Form Components.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>So I guess it will be a great recap and revision for all of you and those who haven&#8217;t checked out the blog on useForm hook yet. I suggest you go through it once I can assure you will find it pretty useful and interesting, how we have made it easy and elaborated its working.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Coming back to the Project, in the Form Components(Personal Details, Address, Payment), we are using the TextField Component of MUI to take the input and edit, as an add-on we are using the register method of useForm to register the data.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We have also used the Button Component of MUI to submit the form and used the props like <strong>variant<\/strong> as filled, <strong>label<\/strong>, and <strong>fullwidth<\/strong>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I have made a Sass file to style my section and buttons in the forms, you can create and use your styles accordingly.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Personal Detail Component<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/Personal Details Component\nimport React from &quot;react&quot;;\nimport { useForm } from &quot;react-hook-form&quot;;\nimport { Button, TextField } from &quot;@material-ui\/core&quot;;\nimport styles from &quot;.\/Form.module.scss&quot;;\n\nconst PersonalDetails = () =&gt; {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n  const onSubmit = (data) =&gt; {\n    console.log(data);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;section className={styles.section}&gt;\n        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;\n          &lt;TextField\n            variant=&quot;filled&quot;\n            type=&quot;text&quot;\n            label=&quot;First Name&quot;\n            placeholder=&quot;First Name&quot;\n            fullWidth\n            {...register(&quot;firstName&quot;, { required: true })}\n          \/&gt;\n          {errors.firstName &amp;&amp; errors.firstName.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            type=&quot;text&quot;\n            label=&quot;Last Name&quot;\n            placeholder=&quot;Last Name&quot;\n            fullWidth\n            {...register(&quot;lastName&quot;, { required: true })}\n          \/&gt;\n          {errors.lastName &amp;&amp; errors.lastName.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            type=&quot;email&quot;\n            label=&quot;Email Address&quot;\n            placeholder=&quot;Email Address&quot;\n            fullWidth\n            {...register(&quot;email&quot;, { required: true })}\n          \/&gt;\n          {errors.email &amp;&amp; errors.email.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            type=&quot;tel&quot;\n            label=&quot;Phone Number&quot;\n            placeholder=&quot;Phone Number&quot;\n            fullWidth\n            {...register(&quot;phone&quot;, { valueAsNumber: true }, { required: true })}\n          \/&gt;\n          {errors.phone &amp;&amp; errors.phone.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;div className={styles.btn}&gt;\n            &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot; color=&quot;primary&quot;&gt;\n              Save\n            &lt;\/Button&gt;\n          &lt;\/div&gt;\n        &lt;\/form&gt;\n      &lt;\/section&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default PersonalDetails;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Address Component<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/Address Component\nimport React from &quot;react&quot;;\nimport { useForm } from &quot;react-hook-form&quot;;\nimport { Button, TextField } from &quot;@material-ui\/core&quot;;\nimport styles from &quot;.\/Form.module.scss&quot;;\n\nconst Address = () =&gt; {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n  const onSubmit = (data) =&gt; {\n    console.log(data);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;section className={styles.section}&gt;\n        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;Address Line 1&quot;\n            type=&quot;text&quot;\n            placeholder=&quot;Address Line 1&quot;\n            {...register(&quot;address1&quot;, { required: true })}\n          \/&gt;\n          {errors.address1 &amp;&amp; errors.address1.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;Address Line 2&quot;\n            type=&quot;text&quot;\n            placeholder=&quot;Address Line 2&quot;\n            {...register(&quot;address2&quot;, { required: true })}\n          \/&gt;\n          {errors.address2 &amp;&amp; errors.address2.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;City&quot;\n            type=&quot;text&quot;\n            placeholder=&quot;City&quot;\n            {...register(&quot;city&quot;, { required: true })}\n          \/&gt;\n          {errors.city &amp;&amp; errors.city.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;State&quot;\n            type=&quot;text&quot;\n            placeholder=&quot;State&quot;\n            {...register(&quot;state&quot;, { required: true })}\n          \/&gt;\n          {errors.state &amp;&amp; errors.state.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;Zip Code&quot;\n            placeholder=&quot;Zip Code&quot;\n            {...register(&quot;zip&quot;, { valueAsNumber: true }, { required: true })}\n          \/&gt;\n          {errors.zip &amp;&amp; errors.zip.type &amp;&amp; &lt;span&gt;This field is required&lt;\/span&gt;}\n          &lt;div className={styles.btn}&gt;\n            &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot; color=&quot;primary&quot;&gt;\n              Save\n            &lt;\/Button&gt;\n          &lt;\/div&gt;\n        &lt;\/form&gt;\n      &lt;\/section&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default Address;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Payment Component<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/Payment Component\nimport React from &quot;react&quot;;\nimport { useForm } from &quot;react-hook-form&quot;;\nimport { Button, TextField } from &quot;@material-ui\/core&quot;;\nimport styles from &quot;.\/Form.module.scss&quot;;\n\nconst Payment = () =&gt; {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n  const onSubmit = (data) =&gt; {\n    console.log(data);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;section className={styles.section}&gt;\n        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;Card Number&quot;\n            placeholder=&quot;Card Number&quot;\n            {...register(&quot;card&quot;, { valueAsNumber: true }, { required: true })}\n          \/&gt;\n          {errors.card &amp;&amp; errors.card.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;CVV&quot;\n            placeholder=&quot;CVV&quot;\n            {...register(&quot;cvv&quot;, { valueAsNumber: true }, { required: true })}\n          \/&gt;\n          {errors.cvv &amp;&amp; errors.cvv.type &amp;&amp; &lt;span&gt;This field is required&lt;\/span&gt;}\n          &lt;TextField\n            variant=&quot;filled&quot;\n            fullWidth\n            label=&quot;Valid till&quot;\n            placeholder=&quot;mm-yyyy&quot;\n            {...register(&quot;validity&quot;, { valueAsDate: true }, { required: true })}\n          \/&gt;\n          {errors.validity &amp;&amp; errors.validity.type &amp;&amp; (\n            &lt;span&gt;This field is required&lt;\/span&gt;\n          )}\n          &lt;div className={styles.btn}&gt;\n            &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot; color=&quot;primary&quot;&gt;\n              Save\n            &lt;\/Button&gt;\n          &lt;\/div&gt;\n        &lt;\/form&gt;\n      &lt;\/section&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default Payment;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Stepper Component<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, we created a Linear Stepper component, and then imported the required MUI components &#8211;<br><strong>Typography, Stepper, Step, StepLabel, Button<\/strong> from Material UI.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, we mapped the steps array to the Stepper to pass the elements of the steps as StepLabel.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After that created a function generateStep in which we created the switch Cases which return our Form Components according to the activeStep.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lastly, we used the <code>handleBack<\/code> and <code>handleNext<\/code> buttons to increment and decrement the <code>activeStep<\/code> value using the <code>SetActiveStep<\/code>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Used Typography to show &#8220;Thank You&#8221; after all steps are completed. This is done through the conditions I have applied for getting the desired output. You can implement your own conditions.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I haven&#8217;t used the StepContent Component in my Horizontal Stepper you can go through it, and can implement it.<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React, { useState } from &quot;react&quot;;\nimport {\n  Typography,\n  Stepper,\n  Step,\n  StepLabel,\n  StepContent,\n  Button,\n} from &quot;@material-ui\/core&quot;;\nimport styles from &quot;.\/LinearStepper.module.scss&quot;;\nimport PersonalDetails from &quot;.\/PersonalDetails&quot;;\nimport Payment from &quot;.\/Payment&quot;;\nimport Address from &quot;.\/Address&quot;;\n\nconst LinearStepper = () =&gt; {\n  const &#091;activeStep, setActiveStep] = useState(0);\n  const steps = getSteps();\n\n  function getSteps() {\n    return &#091;&quot;PersonalDetails&quot;, &quot;Address&quot;, &quot;Payment&quot;];\n  }\n\n  function getStepContent(step) {\n    switch (step) {\n      case 0:\n        return &lt;PersonalDetails \/&gt;;\n      case 1:\n        return &lt;Address \/&gt;;\n      case 2:\n        return &lt;Payment \/&gt;;\n      default:\n        return &quot;&quot;;\n    }\n  }\n\n  const handleBack = () =&gt; {\n    setActiveStep((activeStep) =&gt; activeStep - 1);\n    console.log(activeStep);\n  };\n  const handleNext = () =&gt; {\n    setActiveStep((activeStep) =&gt; activeStep + 1);\n    console.log(activeStep);\n  };\n  return (\n    &lt;div&gt;\n      &lt;Stepper activeStep={activeStep}&gt;\n        {steps.map((step, index) =&gt; {\n          return (\n            &lt;Step key={index}&gt;\n              &lt;StepLabel&gt;{step}&lt;\/StepLabel&gt;\n            &lt;\/Step&gt;\n          );\n        })}\n      &lt;\/Stepper&gt;\n      &lt;div&gt;{getStepContent(activeStep)}&lt;\/div&gt;\n      {activeStep === steps.length ? (\n        &lt;Typography variant=&quot;h3&quot; align=&quot;center&quot;&gt;\n          Thank You\n        &lt;\/Typography&gt;\n      ) : (\n        &lt;div className={styles.btn}&gt;\n          &lt;Button\n            variant=&quot;contained&quot;\n            color=&quot;primary&quot;\n            onClick={handleBack}\n            disabled={activeStep === 0}\n          &gt;\n            Back\n          &lt;\/Button&gt;\n          &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot; onClick={handleNext}&gt;\n            {activeStep === steps.length - 1 ? &quot;Finish&quot; : &quot;Next&quot;}\n          &lt;\/Button&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n};\n\nexport default LinearStepper;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">To render the Stepper Component<\/h3>\n\n\n\n<p>We have imported the LinearStepper Component in the index page and rendered the stepper in the Container Component. <\/p>\n\n\n\n<p>Further, we have passed prop component=&#8217;Box&#8217;, here the component used for the root node. Either a string to use an HTML element or a component. <\/p>\n\n\n\n<p>You can style your customized CSS in any of the MUI Component by using the props <strong><code>sx<\/code><\/strong>, you can customize it as per your needs.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/index page\nimport LinearStepper from &quot;@\/components\/LinearStepper&quot;;\nimport { CssBaseline, Container, Paper, Box } from &quot;@material-ui\/core&quot;;\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;CssBaseline \/&gt;\n      &lt;Container component={Box} p={4}&gt;\n        &lt;Paper component={Box} p={3}&gt;\n          &lt;LinearStepper \/&gt;\n        &lt;\/Paper&gt;\n      &lt;\/Container&gt;\n    &lt;\/&gt;\n  );\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Let\u2019s see the output below.<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img decoding=\"async\" width=\"1200\" height=\"620\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png\" alt=\"Step 1 of Stepper (MUI Component) get load .\" class=\"wp-image-372917\" style=\"width:803px;height:414px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-300x155.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-768x397.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1.png 1282w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">1: Personal Details Form<\/figcaption><\/figure>\n\n\n\n<figure class=\"wk-remove-shadow wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"620\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2-1200x620.png\" alt=\"Switch to Step 2 of Stepper (MUI Component) on clicking next button.\" class=\"wp-image-372918\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2-1200x620.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2-300x155.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2-768x397.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step2.png 1282w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">2:Address Details Form<\/figcaption><\/figure>\n\n\n\n<figure class=\"wk-remove-shadow wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"620\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3-1200x620.png\" alt=\"Switches to Step 3 Stepper (MUI Component) : Fill in the Payment Details on click to next  \" class=\"wp-image-372919\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3-1200x620.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3-300x155.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3-768x397.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step3.png 1282w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">3: Payment Details Form<\/figcaption><\/figure>\n\n\n\n<figure class=\"wk-remove-shadow wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"620\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4-1200x620.png\" alt=\"Switches to Step 4 of Stepper (MUI Component): Final Step to Say Thanks on click to Finish, say thanks\" class=\"wp-image-372920\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4-1200x620.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4-300x155.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4-768x397.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step4.png 1282w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">4: Confirmation Section<\/figcaption><\/figure>\n\n\n\n<p>This is a small example to understand the&nbsp;<strong>MUI in Nextjs\/React<\/strong>. To Clear any doubt you can&nbsp;<a href=\"https:\/\/webkul.com\/blog\/implementation-of-material-ui-in-nextjsreact\/\">read again<\/a>.<\/p>\n\n\n\n<p>Stay tuned till then.<\/p>\n\n\n\n<p>Happy Coding !!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we will learn about the most widely used UI Component library MUI (Material UI) in React. You can also checkout our another blog, where we using tailwind css in material-ui. What is MUI? Material UI is a library of React UI components that implements Google&#8217;s Material Design. For reference, you can check <a href=\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":494,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198,13575,6357],"tags":[13801,13800,13803,13798,12682,7895,6359,13802,13799,3753,13563],"class_list":["post-372826","post","type-post","status-publish","format-standard","hentry","category-javascript","category-next-js","category-react-js","tag-horizontalstepper","tag-linearstepper","tag-material-design","tag-mui","tag-nextjs","tag-react","tag-react-js","tag-react-library","tag-stepper","tag-ui-component","tag-useform"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>MUI | Implementation of Material UI in Nextjs | Webkul Blog<\/title>\n<meta name=\"description\" content=\"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MUI | Implementation of Material UI in Nextjs | Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-24T10:52:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-23T09:49:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png\" \/>\n<meta name=\"author\" content=\"Rajat Chaturvedi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajat Chaturvedi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\"},\"author\":{\"name\":\"Rajat Chaturvedi\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/bceaf1c351d9bcf86cf2084a02915dab\"},\"headline\":\"Implementation of Material UI in Nextjs\",\"datePublished\":\"2023-03-24T10:52:49+00:00\",\"dateModified\":\"2024-10-23T09:49:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\"},\"wordCount\":1592,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png\",\"keywords\":[\"HorizontalStepper\",\"LinearStepper\",\"Material Design\",\"MUI\",\"nextjs\",\"react\",\"react js\",\"react library\",\"Stepper\",\"Ui Component\",\"useForm\"],\"articleSection\":[\"JavaScript\",\"next js\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\",\"url\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\",\"name\":\"MUI | Implementation of Material UI in Nextjs | Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png\",\"datePublished\":\"2023-03-24T10:52:49+00:00\",\"dateModified\":\"2024-10-23T09:49:53+00:00\",\"description\":\"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1.png\",\"width\":1282,\"height\":662,\"caption\":\"Step1-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementation of Material UI in Nextjs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/bceaf1c351d9bcf86cf2084a02915dab\",\"name\":\"Rajat Chaturvedi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23c138c09b53f0dad5b70e6bdeed2c2c846c1950ff6009b9932cc7908e015cda?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23c138c09b53f0dad5b70e6bdeed2c2c846c1950ff6009b9932cc7908e015cda?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rajat Chaturvedi\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rajatchaturvedi-mg758\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MUI | Implementation of Material UI in Nextjs | Webkul Blog","description":"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/","og_locale":"en_US","og_type":"article","og_title":"MUI | Implementation of Material UI in Nextjs | Webkul Blog","og_description":"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.","og_url":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-24T10:52:49+00:00","article_modified_time":"2024-10-23T09:49:53+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png","type":"","width":"","height":""}],"author":"Rajat Chaturvedi","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rajat Chaturvedi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/"},"author":{"name":"Rajat Chaturvedi","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/bceaf1c351d9bcf86cf2084a02915dab"},"headline":"Implementation of Material UI in Nextjs","datePublished":"2023-03-24T10:52:49+00:00","dateModified":"2024-10-23T09:49:53+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/"},"wordCount":1592,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png","keywords":["HorizontalStepper","LinearStepper","Material Design","MUI","nextjs","react","react js","react library","Stepper","Ui Component","useForm"],"articleSection":["JavaScript","next js","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/","url":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/","name":"MUI | Implementation of Material UI in Nextjs | Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1-1200x620.png","datePublished":"2023-03-24T10:52:49+00:00","dateModified":"2024-10-23T09:49:53+00:00","description":"Are you a React geek? Explore about MUI-React Component Library along with a comprehensive example following the best coding practices.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Step1-1.png","width":1282,"height":662,"caption":"Step1-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/mui-in-nextjsreact\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementation of Material UI in Nextjs"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/bceaf1c351d9bcf86cf2084a02915dab","name":"Rajat Chaturvedi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23c138c09b53f0dad5b70e6bdeed2c2c846c1950ff6009b9932cc7908e015cda?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23c138c09b53f0dad5b70e6bdeed2c2c846c1950ff6009b9932cc7908e015cda?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rajat Chaturvedi"},"url":"https:\/\/webkul.com\/blog\/author\/rajatchaturvedi-mg758\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/494"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=372826"}],"version-history":[{"count":44,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372826\/revisions"}],"predecessor-version":[{"id":470916,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/372826\/revisions\/470916"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=372826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=372826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=372826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}