Vercel

Vercel CLI とは Vercel をコマンドラインから操作できるツールです。 vercel.com Vercel CLI の認証情報ファイルはどこにあるか ~/.local/share/com.vercel.cli 中身 ファイルの一覧 $ pwd /home/takiya/.local/share/com.vercel.cli $ ls -la drwxr-xr-x foo foo 4.0 KB Wed Sep 28 11:47:16 2022  . drwxr-xr-x foo foo 4.0 KB Wed Sep 28 11:47:02 2022  .. .rw-------…

こんにちは！ラクス入社１年目の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のデータベースに…

React のフレームワーク Next.js の Hello World から Vercel へのデプロイまでを試してみます。 基本的には 公式のチュートリアル を参考にしています。 やってみた 環境作成 create-next-app コマンドでプロジェクト作成します。 $ npx create-next-app@latest ... ✨ Done in 9.20s. Initialized a git repository. Success! Created next-sample at /PATH/next-sample この場合、聞かれるのはプロジェクト名のみです。 ※ オプションで …

ファーストインプレッションは仕事の上で同僚がいい感じに使ってるな、って横目で見てたもの。 最近プライベートでNext.jsでのSSRを試しているので、それを踏まえての感覚はセカンドインプレッションだろう。その今の感情の備忘記事。 で、それがどういうものかというと 「Next.jsはOSSだけれどあくまでVercelのためのものなので他のホスティング環境では生かせなかったり面倒だったりする場面があって大変」 って感じ。 多分今現在ReactをSSR（やSSG、ISRなど）するならNext.jsでしょ！ だけれど、そうしてデファクトスタンダードになっているものが特定のプラットフォーム向けに最適化さ…

はじめに vercelでserverless functionが利用できるようになっていたので、ローカルで少し動かしてみる。Python、Golang、Ruby、Nodeも使えるらしい。 vercel.com serverless functionは利用できるがメモリなどの制限があるため、何か簡単な処理か、どうしてもサーバー側で処理しないといけないものにとどめておいた方がよさそう。果たしてそんな処理があるのか・・・。 vercel.com WSL/ ubunts環境にgolangとPythonをインストール golangのインストール $ sudo add-apt-repository ppa…

3月8日にシン・エヴァンゲリオン劇場版されてから早4ヶ月。そろそろ終映が近づいてきました。 前作のQからもかなりの時間が経っているのでエヴァンゲリオンは忘れかけていたのですが、完結作であるシン・エヴァを見てTV版からの四半世紀を改めて振り返ったりと、自分の中で大きな存在だったことを思い出させてくれました。 数年もすれば、エヴァンゲリオンについての記憶はまた薄れて、いずれ消えていくでしょう。今は日本中がエヴァンゲリオンという感傷の中にいるような気がしていますが、そんな人達の衝動を書き残す場所があってもいいのではないかと思い、「寄せ書き・メッセージボード」としてのウェブサイトを作ってみました。 フ…

山 TL;DR mm2mm: Yet Another まとめサイト 使った技術スタックとしては以下です。 Next.js Vercel (最初はNetlify使おうとしたのですが、後述する理由でやめました。) Bootstrap 5 フロントエンドと私 今までインフラ系エンジニアとして働いていたのですが、フロントエンドには苦手意識しかなかったです。 何故か。美的センスがゼロに等しいので・・・ ただまあ、フロントエンドの技術自体は結構面白いなーと思っていたし、わかりやすく成果を示せるのでいつか作ってみたいと思っていました。 JavaScriptもNext.jsもVercelも何もわからん状態から…

Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳 確かにCRAのユースケースはもう今時のニーズに合うことの方が少なそうだな。 かといってランチャーになるだけなら存在価値自体も薄くなって要らんのではになりそうな気もするが。 Go Backend Clean Architecture GitHub - amitshekhariitbhu/go-backend-clean-architecture: A Go (Golang) Backend Clean Architecture project with Gin, MongoDB…

Vue.js 超入門 3.2対応 「Vue.js 超入門 3.2対応」発行主旨・内容紹介 「Vue.js 超入門 3.2対応」目次 「Vue.js 超入門 3.2対応」Amazonでの購入はこちら 「Vue.js 超入門 3.2対応」楽天市場での購入はこちら※電子書籍版です Vue.js 超入門 3.2対応 インプレスグループで電子出版事業を手がけるインプレスR&Dは、技術書典や技術書同人誌博覧会をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指し最新の知見を発信する技術の泉シリーズ2023年1月の新刊と…

mozaic.fm State of JS 2022 もうYarnはなるべく使わないようにしてたけどpnpm試していこうかな。 Svelteはいいぞ。 Remixもいいけど確かにやっぱReactじゃんなのそれはそうなんだよねぇ。 まぁ今のところだと現実的には要件によってNext.jsかRemixのどっちかを選ぶんだろうなってのはある。 そういやAstroでFable使えたりするんかな、今度やってみよ。 2022 JavaScript Rising Stars Denoは触ってみたけどBunはまだだったな。移行はまだ様子見状態。 エコシステムがもっと整わないとワークアラウンドの方が多そう。 逆に…

はてなブログ独自の集計による人気記事のランキング。1月22日（日）から1月28日（土）〔2023年1月第4週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 ネットの音楽オタクが選んだ2022年のベストアルバム 50→1 - 音楽だいすきクラブ by id:ongakudaisukiclub 2 なぜ一見何の利益もない嫌がらせ行為を行う人間が存在するのか？──『悪意の科学: 意地悪な行動はなぜ進化し社会を動かしているのか？』 - 基本読書 by id:huyukiitoichi 3 3万円で買えるPanasonicのミニコンポSC-PMX90はPCやテレビの高音質化ができてオーデ…

Cloudflareのキャンペーンで沢山Yubikeyを手に入れた。 だって安かったし…などと供述しており pic.twitter.com/EHYQCH306V— ゲン (@gen_sobunya) 2023年1月26日 元々Yubikey5C nanoを1個所持していたので複数セキュリティキー…つまり予備セキュリティキーが手に入った形。 Yubico - YubiKey 5C Nano - USB-C - 2ファクター認証セキュリティキーYubicoAmazon セキュリティキーが1本しかない状態ではバックアップが難しく、TOTPなど他の多要素認証手段を組み合わせることが必須だったが、2本以…

React Server Components (RSC) について学んでいる中で、Server Component (SC) を SSR した場合に Hydration はどうなるんだろう？と疑問に思ったので調べてみたメモ。間違っていたらすいません。 これまでの Hydration SC の Hydration Next.js における Hydration の比較 Next.js 13 app(beta) の Hydration 通常の Next.js 13 の Hydration パフォーマンス まとめ これまでの Hydration クライアント側の JS に hydrate すべきコン…

7-5です。道中が長くてあんまり普段使いするような海域ではなさそうですが、水上機母艦を2~3隻組み込んだ状態で周回できます。どんなものか理解するためにとりあえず20出撃してきました

ベジェルとウル・コーマ 北京オリンピックの開会式 笔顺编号 漢字と近代文明 ソートプログラム 贝歇尓と乌库姆 リファレンス ベジェルとウル・コーマ 厚かましく自信たっぷりなベジェルとウル・コーマの検閲体制が寛容なのか、 それとも無能なのか、リンク先のアドレスに ".uq" ".zb" がついているものがたくさんあった チャイナ・ミエヴィル『都市と都市』（早川書房）p.156 架空の国家の……トップレベルドメイン……！！ 「ベジェル」（Besźel）が".zb"[1]で、「ウル・コーマ」（Ul Qoma）が".uq"。日本なら".jp"とつくあれです。 [1] ちなみにベジェルが".bz"や".…

1/15 作問のために組合せ論のことをいろいろ調べていた。parking function、面白そう。作問の役に立つかはわからない。 今日の全単射n台の車が順番に駐車場に来る。駐車スペースはn個あり、i番目の車はa_i, a_i+1, .., n番目の駐車スペースを順番に見て最初に見つけた空きスペースに駐車する。見付からなかったら立ち去る。n台全て駐車できるaは(n+1)^{n-1}通りある。証明は夜。— 寝る (@37zigen) 2022年11月1日 次にyukicoderで開催予定のコンテストは群論コンテストだが、これとは別のテーマ付きコンテストを計画中。そのテーマで作問をした。ボス問は…

サイドプロジェクトで Vercel と Next.js で Web サイトを構築している。 その Web サイトからメールを送る必要があり、横着して SendGrid などのメールサービスを介さずに直接 SMTP 25 番で送ろうとした（SMTP auth もなし）。 もちろん、筋のいい方法ではないことが分かっており、スパム扱いされやすかったり、接続拒否される可能性はある程度想定済みだ。 状況 使ったライブラリは node-sendmail。 GitHub - guileen/node-sendmail: send mail without setting up a SMTP server Q…

next lint の結果を Reviewdog に食わせて PR にコメントとして出したかったんだけど結構ハマったのでメモ。 普通に next lint を動かしてもだめ "scripts": { "lint": "next lint" } - uses: reviewdog/action-setup@v1 with: reviewdog_version: latest - name: Run reviewdog env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: npm run lint | reviewdog…

クッキーを焼こう。 たくさん焼こう。 クッキーを焼くためにクッキーを焼こう。 知る人ぞ知る放置系クリックゲー、Cookie Clickerの話をします。 2013年に彗星のように現れた“例のクッキーを焼くだけのゲーム”が、Steamに移植されたのはつい最近のこと。 かつてはブラウザ版で少しやっては忘れ、少しやっては忘れを繰り返してきた私ですが、お金をかけてしまえばすぐには退けなくなるだろうとウィンターセールに乗じて再びベーカリー業に戻って参りました。 そう、買ってしまったのが運の尽きでした。 これは年末年始をクッキーに変換してしまった挙句、クッキーを壊すべくあらぬ方向に暴走したアホなプレイヤー…