React フックフォームとマテリアル UI を使用してスタイリッシュな Next.js フォームを構築する

あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。続きを読む。

マテリアル UI (MUI) は、Google のマテリアルデザインシステムを実装する一般的なコンポーネントライブラリです。機能的で視覚的に魅力的なインターフェイスを作成するために使用できる、事前に構築された UI コンポーネントが幅広く提供されています。

今日のMUOビデオ スクロールしてコンテンツを続けてください

React 用に設計されていますが、その機能を React のエコシステム内の他のフレームワーク (Next.js など) に拡張できます。

React Hook フォームとマテリアル UI の入門

反応フックフォームは、フォームを作成、管理、検証するためのシンプルで宣言的な方法を提供する人気のあるライブラリです。

タスカーと関係のあるクールなこと

統合することでマテリアルUI UI コンポーネントとスタイルを使用すると、使いやすく見栄えの良いフォームを作成し、一貫したデザインを Next.js アプリケーションに適用できます。

まず、Next.js プロジェクトをローカルでスキャフォールディングします。このガイドの目的のために、 App ディレクトリを使用する Next.js の最新バージョン。

 npx create-next-app@latest next-project --app

次に、これらのパッケージをプロジェクトにインストールします。

 npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

構築するもののプレビューは次のとおりです。