Nextjs– tag –
-
Next.jsとSupabaseで全文検索を実装する方法
今回はNext.jsとSupabaseを利用し、テーブルの全文検索を行うことができるアプリを作成します。 実はこの『全文検索』、FirebaseよりもSupabaseのほうが優れている分野の一つです。FirebaseはNoSQLデータベースを使っているため、ネイティブの全文検索があ... -
Supabase + Next.jsで画像投稿アプリを最適化する（画像圧縮、ファイルサイズ制限、ファイルのアップロード数制限）
以前、認証付きのストレージサービスの作り方をご紹介しました。 しかしながら、もしこれをリリースして世の中に出した場合、解決しなければ行けない問題がいくつかあります。例えば『サイズ制限』がついていないため、ユーザーがスマートフォンで撮影した... -
Next.js + Supabaseでソーシャルログインを実装する方法
WEBサービスを運営する上で、重要な点が１つあります。それは『サービスを使うまでのハードルを以下に低くするか』というものです。 もしユーザー登録やログインの際、フォームに入力をしなければいけない仕様にした場合、70～80%もの人が離脱してしまう、... -
Next.js + SupabaseでSMS認証を作成する方法
前回はNext.jsとSupabaseを使って、認証付きチャットアプリを作成しました。ここまでくれば、もう一つのアプリとして成り立つレベルです。 しかしながら、サービスとしてローンチするにはまだまだ問題があります。人が集まれば集まる程、Botが投稿をし始め... -
Next.js + Supabaseでリアルタイムチャットを作ろう
先日は『Next.js』と『Supabase』を利用してTodoアプリを作ってみましたが、本日はリアルタイムに情報が更新されるチャットルームを作成します。 昔からあるような『利用者にリロードを強制するチャットルーム』であれば、レガシーなシステムでも作れるで... -
Next.js + SupabaseでStorageを利用した画像投稿アプリ作成
今回はNext.jsとSupabaseのStorageを利用し、シンプルな『画像投稿アプリ』を作成します。『画像投稿アプリ』は、一見作るのが簡単なように思えるかもしれませんが、何も考えずにただ『画像をデータ領域にアップロードするだけ』のアプリを作ってしまうと... -
Amplify+Nextjsのテンプレート
AWSのAmplifyでNext.jsアプリを利用する際の、スタータテンプレートです。 1. Next.jsアプリの準備 前提 既存のNext.jsアプリがある場合はそちらを使用することによってこの手順はスキップ可能です こちらの準備を省きたい場合はサンプルコードをご使用く... -
Next.js + SupabaseでAuth + Storageのストレージサービスを作る方法
ビジネス向けのITツールには、業界ごとに多種多様な機能が提供されていますが、ほぼ全ての業種で必要とされているのがこの『ストレージサービス』です。特にテレワークが流行っている現在では、共有フォルダ等よりストレージサービスを使うのが一般的です... -
Next.jsとSupabaseで認証機能ありのリアルタイムチャットを作成する。
先日、リアルタイムチャットの作り方についてはご紹介しましたが、今の時代に『誰でも入り放題なチャットルーム』を作った場合、BOTやスパム業者等がたくさん入ってくることになるでしょう。 そこで今回は、認証機能をリアルタイムチャットと組み合わせて... -
Next.jsとSupabaseで認証つきチャットアプリを作成する（SNS風UI）
先日はNext.jsとSupabaseを使って『認証つきリアルタイムチャット』を作るところまで行きました。 今回は更に使い勝手のいい『SNS風UIのついた認証付きチャットアプリ』を作りましょう。具体的には下記のような画面です。 ここまでできれば、もうアプリに...
