Nextjs
![](https://masa-engineer-blog.com/wp-content/uploads/2022/05/xNext.js-firebase-multi-files-upload-thumbnail-320x180.png.pagespeed.ic.2yAAKv09zH.png)
Next.jsで複数画像をpreview表示してuploadする方法
本記事では、ファイルのstorage(保存先)として、Firebase storageを利用します。今回、複数のファイル(画像)をまず画面にpreview表示して、表示した複数の画像をFirebase storageへuploadする方法を紹介致します。
![](https://masa-engineer-blog.com/wp-content/uploads/2022/05/xNext.js-firebase-file-upload-thumbnail-320x180.png.pagespeed.ic.0LkbF0szzT.png)
Next.jsとFirebase storageで画像をuploadする方法
Next.jsとFirebaseを組み合わせると、簡単に画像ファイルのアップロードを行うことができます。Next.js はReactのframeworkになります。画像ファイルのstorage(保存先)として、Firebase storageを利用します。
![](https://masa-engineer-blog.com/wp-content/uploads/2022/05/xvercel-deploy-thumbnail-320x180.png.pagespeed.ic.WU2x3JbjxI.png)
【超簡単】NextJSアプリをVercelにデプロイする方法
NextJSに限らず、モダンなJSアプリをvercelというサービスを利用して、無料公開することができます。GithubアカウントとGithubに公開したいrepositoryが上がっていれば、すぐにデプロイをすることができて便利です。