Next.js
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以前の段階で、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 …
前回の記事では、Next.jsにFirebaseのAuthenticationを使ってユーザー登録機能を追加しました。 nekorokkekun.hatenablog.comそこで「登録したユーザーの情報を動的に描画するマイページ」を作りましょう。 前提 ユーザー情報の取得 firebase.auth().current…
今回はNext.jsでFirebaseから任意のデータを取得して描画する方法について解説をしていきます。ウェブアプリを作成する際、レイアウトは決めておいてコンテンツの名前や説明文などはデータを取得してレイアウトにはめ込みたい、という場合がありますね。この…
本記事では、Next.jsプロジェクトにFirebase Authenticationを組み込み、サインイン機能を実装するとともに、HOC（高階コンポーネント）を使用してサインインユーザーのみが閲覧できるページを作成していきます。 Next.jsプロジェクトの準備 サインインユー…
今回はNext.jsからFirebase Cloud Firestoreのデータを削除する方法について解説していきます。 コードの全体像 一意のidを取得する 削除イベントの作成 以下の記事を前提にしています。 nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com コードの…
こちらでは、Next.jsで作成した投稿フォームからFirebaseのCloud FirestoreのDBへデータを登録（インサート）する方法について解説をしていきます。DB設定などについては以下の記事に詳しく記述してあります。 nekorokkekun.hatenablog.com FirestoreのDBに…
Next.jsからCloud Firestoreへの接続をするための方法をまとめておきます。 まずやること .env作成 dotenvのインストール next.config.js作成 lib/db.js作成 具体的な使用例 まずやること 忘れがちなDB設定でやるべきことをまとめておきます。 .env作成 dote…
Cloud Firestoreに格納されたデータから一意のIDを取得したいという時の方法を解説します。以下の赤枠の部分ですね！ すでにFirebaseのDBと接続できているという前提で、以下のような書き方をすれば取得可能です。pages/Posts.js // 上記省略 handleDelete =…
こちらではNext.jsのプロジェクトにFirebaseのCloud Firestoreを組み込む方法について解説をしていきます。 Firebaseでプロジェクトの作成〜コレクションの作成 Next.js側の設定 Firebaseでプロジェクトの作成〜コレクションの作成 Firebaseにアクセスし、Co…
こちらではGCP（Google Cloud Platform）をNext.jsのプロジェクトに組み込む方法を解説していきます。 Next.jsプロジェクトの立ち上げ GCPでデータベースの作成 GCPシェルからデータベースの作成 データベース、テーブルの作成 Next.jsプロジェクトにMySQLを…
シンプルかつ機能的なメモアプリを作成しました。 直感的に操作することが可能で、思いついたことをすぐに記録することができます。現在iPhone、iPadに対応しています。iPhone上の画面iPad上の画面 今後、デザイン、機能面での充実を予定しています。
Next.jsにMaterial-UIを組み込み、ボタン表示をするのがとても簡単だったので備忘録として残します。 $ npm install @material-ui/core $ npm run dev import Button from '@material-ui/core/Button'; const Index = () => ( <Button variant="contained" color="primary"> Hello World </Button> ); export defau…
Next.jsのプロジェクトにMaterialize.cssを組み込みたい場合は以下のような設定に。Next.jsの設定は以下の記事にて解説しています。 nekorokkekun.hatenablog.com import React from 'react'; import Link from 'next/link'; import Head from 'next/head'; …
Next.jsでタグを設定する簡単な方法は以下の通りです。 import Link from 'next/link'; ★ class Header extends React.Component { render() { return ( <React.Fragment> <Head> ★ <title key="title">タイトル</title> </Head> ★ </React.Fragment> ) } } export default Header;
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 server.jの作成 next-route…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 目標の確認 非同期通信で読…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 スタイリングを行おう SCSS…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 propsの基本的な使い方 pro…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 シェアするComponentを作成…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 Index.jsをSPA構成にしてみ…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 Componentを使ってみる 各…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 前提 Next.jsプロジェクト…
