2019-10-01から1ヶ月間の記事一覧
今回は、Next.jsとFirebase Functionsを用いて、お問い合わせフォームを実装していきます。 参考にした記事 Firebase側の実装 Firebaseとの接続を行います。 Firebase Functionsの設定 フロント側の実装 Firebase Functionsにエラーが出る場合 参考にした記…
Next.jsでデプロイ前に環境変数を設定する際には以下のコマンドを用いることができます。 now secret add で環境変数を追加 $ now secrets add <secret-name> <secret-value> 以下は一例です。 $ now secret add FIREBASE_API_KEY xxxxxxxxxxxx > Success! Secret firebase_api_key adde</secret-value></secret-name>…
以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成し、登録したクレジットカードで単発決…
以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、Next.js上にFirebaseでStr…
以前まとめたこちらの記事の続きとなります。 nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、タイトルの通り、StripeとFirestoreとFirebase Authent…
Next.js（React）の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、 useEffect(() => { ... } , []); が使えます。以下は一例です。 import { db } from '../lib/db'; import React, { useEffect…
Next.js（React）でreact-stripe-elementを実装した際に、フォームだけが表示されないという現象が起こりました。これは、Headタグ内で読み込んでいるstripe-jsのバージョンが不適合であったということでした。 <script src="https://js.stripe.com/v3/"></script> を実装しなければならないところ <script src="https://js.stripe.com/v2/"></script> を実装して…
こんなエラーが出た場合、 Invariant Violation: React.Children.only expected to receive a single React element child. 意味としては、「Reactのコンポーネントは、1つしかエレメントを内包できません」という意味となります。 return ( <StripeProvider stripe={this.state.stripe}> <Head> <script src="https://js.stripe.com/v2/"></script> </Head> <Header /> <div> <h2>{det…</h2></div></header></stripeprovider>
Next.jsで決済処理を実装したいという場合、FirebaseとStripeへ同時にユーザー登録をしたいという場合があるはずです。（厳密には、Stripeは顧客登録）今回はStripeとFirebase Authenticationへのユーザー登録を同期させ、その後、クレジットカードを登録す…
Next.jsでHead内にCSSや外部script、titleタグなどを組み込みたかったので調べてみました。 結論としては、 import Head from 'next/head' をインポートし、render関数内などに、 <Head> <script src="https://js.stripe.com/v2/"></script> </Head> こんな感じでHeadタグを作って、組み込みたい要素を入れてあげるだけでOK…
Next.js内でFirebase Functionsを使用するためにyarn serveを行うと以下のようなエラーが。 error functions@: The engine "node" is incompatible with this module. Expected version "8". Got "10.16.3" error Commands cannot run with an incompatible …
