Vulcan Docs | Vulcan
They support VulcanContributorsThis project exists thanks to all the people who contribute. BackersThank you to all our backers! 🙏 [Become a backer] SponsorsSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor] Technical supportsThey give time and share knowledge to support the project.
WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行 - ZOZO TECH BLOG
はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。 なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。 リプレイス前の環境 リプレイス前の環境はオンプレミスの環境にロードバランサー、Windowsサーバー(IIS)があり、そこでVBScriptが動いています。VBScriptでテンプレートHTMLにデータを流し込み、ブラウザに表示する仕組み
Next.js アプリを Cloud Run へデプロイする（Secret Manager利用）
Next.jsアプリケーションのデプロイ先といえばVercelが筆頭ですが、他のプラットフォームでも起動できます[1]。この記事は Next.js のDocker Imageをつくり、Google Cloud の Cloud Run へデプロイしたときの記録です。なお、Next.jsはGraphQLを呼ぶServer Side Rendering（SSR）アプリを想定しています。 Terraform で Artifact Registry をつくる Cloud Run へデプロイするにはコンテナイメージが必要です。そしてコンテナイメージを保存する場所は、Google Cloud の Artifact Registry がオススメです。以下を参考に Artifact Registry のリポジトリを作成してください 参考までに、こちらのリポジトリで今回用に改変したものを用意しています。 va
Remix vs Next.js
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
stale-while-revalidate対応のCDNでISRのような挙動を実現する
先日、Next.jsのISR（Incremental Static Regeneration）について書きました。 ISRは非常に強力な機能なのですが、セルフホスティングでNext.jsを動かす場合には色々と使うのが難しかったりします。この記事ではその理由とCDNを使ってISRと似たような挙動を実現する方法を紹介します。 Next.jsのISRをVercel以外で動かすのは難しい Vercelは自社でメンテナンスしているNext.jsを簡単にデプロイできることを大きな強みとしています。Vercelにデプロイする場合、ソースコード上で決められた書き方さえすれば、Vercel側の追加設定なしでISRを利用できます。 しかし、Vercel以外のプラットフォームにデプロイするとなると途端に話がややこしくなります。 Next.jsのISRはキャッシュしたHTMLをファイルシステムに書き込む仕様になっ
CDNのエッジで実行する系が面白い
先日の Next.js Conf で Vercel は Next.js の新しいバージョン「12」をリリースした。 興味深いのは、Vercel は同時にEdge Functionsというサービスを開始したことだ。 Edge Functions – Vercel 謳い文句のひとつに Push your functions to the edge とあるように、「エッジ」で実行される「関数」を提供するプラットフォームである。 ここで言うエッジとはなにかというと、Vercel は明言していないが CDN のエッジのことだ。 Vercel の例のように「CDN のエッジで実行する系」が増えている。例えば以下の 7 つだ。 Cloudflare Workers Fastly Compute@Edge AWS CloudFront Functions AWS Lambda@Edge Deno Depl
Next.js 12
As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds Middleware (beta): Enabling full flexibility in Next.js with code over configuration React 18 Support: Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support: Opt-in for 20% smaller images Bot-aware ISR Fallback: Optimized SEO for web craw
TypeScriptでWebサービス開発（Apollo Server/Prisma/Next.js etc...)
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
Testing | Next.js
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
Next.jsプロジェクトにCypressを導入してGitHub ActionsでE2Eテストをする
はじめに ※この記事は下記記事の延長です。下記記事を読まなくても問題ないように書いていますが、ご興味ありましたらご一読ください。 今回はNext.jsプロジェクトにCypressを導入してGitHub ActionsでVercelのPreview環境のE2Eテストをするまでの手順を書いていきたい思います。 前提 Next.jsでsrcディレクトリ配下にアプリケーションコードを配置していること Vercelを使用しており、PRごとにPreview環境がデプロイされること 導入手順 必要なパッケージをインストール npm scriptsをpackage.jsonに追加 yarn cy:openを実行し雛形を作成 設定ファイルを修正し初めてのテストを実行 TypeScript対応 @testing-library/cypressの設定 GitHub Actionsの設定 必要なパッケージをインス
Blitz.js、Next.js辞めるってよ - Qiita
Blitzは、ざっくり言うとReact版Ruby on Railsです。 Reactの面倒なところを全てすっ飛ばし、技術選定なんてどうでもいいから今すぐアプリを動かしたいんだよ、という要望を叶えるのに適したフルスタックフレームワークです。 概要はBlitz.js - React on Rails、実際の使い方はBlitz.jsチュートリアル：投票サービスを15分で作ってみるあたりを見てもらうとして、とにかくチュートリアルに従ってコマンド打てばとりあえず動くものが一瞬でできるとかそんなかんじです。 技術的にはReact + Next.jsで動いています。 ということだったのですが、先日どうも雲行きの怪しいRFCが提出されました。 以下は[RFC] Time to maintain a fork of Next.js?の紹介です。 なお提案者のBrandon BayerはBlitz.jsの作者
Next.jsアプリをVercelからGoogle Cloudに移行した話
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから
Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中
この記事は、Supabaseチームによる記事「Making the Supabase Dashboard Supa-fast」の和訳記事です。 Supabaseのダッシュボードは、この1ヶ月でより機能が充実しました。Monacoによる強力なSQLエディタを用意しました。私たちは、データベースのAirtableのようなビューを構築し、編集が簡単になりました。 機能・性能・DX-3つの選択 特にシングルページアプリケーションでは、新しい機能を追加すると、パフォーマンスがすぐに低下することがあります。ここでは、開発者の体験(DX)を損なうことなく、アプリケーション内で良好なベースラインパフォーマンスを保証するために行ったステップを紹介します。 ベースラインを確立し、目標を設定する。 測定できないものは直せない パフォーマンスを向上させるために、容易に解決できる問題がいくつかありましたが、その前に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Strongly Typed Google Analytics V4 with Nextjs
VercelからMySQL/PostgreSQLに接続したい場合にどういうアーキテクチャにするのが最適か
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
GitHub - catnose99/next-head-seo: A light-weight SEO plugin for Next.js.
Nextra – Next.js Static Site Generator – Nextra
How I Build Scalable Modern Web Applications for Real Users
Startup Landing Templates
