React × SupabaseプロジェクトをVercelでデプロイ（webpack + TypeScript + React）
まえがき 「フロントエンドの処理は整った！でもデータベースもサーバーも設定しないとアプリとして公開できない...」「バックエンドは簡単に構築したい...」そんな願いをかなえるのが、BaaS（ = Backend as a Service）のひとつ、「Supabase」 です。 本記事は、そんなSupabaseの入門記事として、また 「React×Supabaseプロジェクトをいかにして公開するのか？」 を解決する記事としてお届けします。 本記事で解説すること 技術を予習する Supabaseとは？ Vercelとは？ 手順 GitHubリポジトリとローカルのプロジェクトを紐づける webpack + TypeScript + React のプロジェクトを用意 Supabaseでデータベースを構築 Supabaseでバックエンドを構築 Vercelでデプロイ 技術を予習する Supabase
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
2022年の技術トピックをふりかえる - laiso
それはベンツなんよ 総括 今年はコードをよく読むようにした。 技術的にはひき続きPaaSやクロスプラットフォームの動向に注目した。 デファクトの移り変わりを感じるので来年以降はGoやGraphQLに手を出していきたい。 去年のエントリ: 2021年に作ったモノや技術をふりかえる 今年やったこと コード読み 去年はコードを書くことに注力していたので今年は一転コードを読んでいた。 プログラム雑談ポッドキャストを聞いていて「コード読み」っていう言葉がよく出てくるので聞きながらそういえば自分もこの分野が好きだなと思い出したので意識してやることにした。 丁度、最新技術のトレンドだけ俯瞰しているのに学びを感じなくなってきたのでより潜りたい気持ちがあったのでそれを満せたと思う。 IntelliJ IDEAで全言語のプログラミング環境が楽に揃っているのが心強い（Samuraismさんありがとう）。 読んだ
Next.js + Vercel + Supabase を用いた高速アプリ開発 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス入社１年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsはReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生
Next.js+TypeScriptでシンプルなニュースサイトを作ってみた。 - Qiita
作ったもの タイトルはSimple Newsです。 サイトURLは、 こちらです。 ソースコードは こちらです。 Google News を参考にしました。 どんな機能があるの？ NewsAPIからニュースサイトの記事のデータを取得し、タイトルと画像を表示 NewsAPIは、世界中のニュースサイトから検索をかけて、情報を取得できるAPI ( Application Programming Interface ) OpenWeatherMapから取得した、現在の天気情報と5日間の天気予報を表示 OpenWeatherMapは、現在の気象やある期間の気候の予測データを取得できるAPI ページ遷移が高速 記事をクリックすると、記事が掲載されているサイトへ飛びます。 こんな感じでとてもシンプルで高速に動くニュースサイトです。 こんな人に読んでほしい Next.jsを使ってみたい初心者 外部APIを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
