We want the default build output of Next.js to work well when self hosting, and also well on Vercel. And guess what? They're the same output. Well, almost. Let me clarify. It took us a while at Vercel to figure out the correct format and boundary between open source framework and infrastructure platform. Our philosophy is called framework defined infrastructure. And critically, the specification t
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.14 です。 Next.js などを手掛ける Vercel Inc.（旧 Zeit ）が運営しているサービス、Vercel（旧 Zeit Now）の料金形態とその内容についてまとめます。 なお、掲載内容は 2020/12/08 時点のものです。 （過去に別所で公開していた記事の加筆版です） Note: 2020/12/08 19:51 - Hobby プランは個人的かつ非営利目的な目的でのみ利用できる旨を追記 Note: 2021/02/06 - 禁止されている用途について追記 Note: 2021/02/11 - Hobby プランにおける広告を掲載した、個人ブログでの利用について追記 Note: 2022/02/26 - Hobby プランにおける広告掲載の利用不可について追記 前回： Ver
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］ CDNのエッジロケーションでJavaScriptランタイムを提供するサービスが相次いで登場しています。 代表的なものとしてCDNプロバイダのCloudflareやFasltyが提供する「Cloudflare Workers」や「Fastly Compute@Edge」などがあり、最近ではCDNプロバイダ以外からも「Deno Deploy」「Vercel Edge Runtime」などが登場しています。 これらに共通するのは、世界中に分散したデータセンターで稼働するサービスであること。そして、サーバサイドJavaScriptの実行環境が用意されていることです。 Vercelが提唱するエッジミドルウェア 現在インターネット上でサービスを提供する手段としてエッジロケーション
概要 Spotify APIの楽曲レコメンド機能を使って、DJ Mix用のプレイリストを作成できるWebアプリケーションを開発しました。まずはそのアプリケーションの内容をご紹介します。 実装はTypeScript + Next.jsで行いVercelにデプロイする形にしたところ、非常に高い開発体験が得られました。後半はSpotify APIの使い方を含めて、Next.jsでの実装やVercel上での設定について書いていきます。 できたもの AUTOMISCE - Automate Your Mix with Spotify API 使い方 まず"Sign in with Spotify"ボタンでSpotifyにログインします。次に右側の検索欄で最初の曲を選んでプレイリストに追加します。するとその曲と似たテンポでかつテンション感が少し上の曲が"Upper Tracks"欄に、少し下の曲が"D
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.jsでv12〜middlewareという機能が使えるようになりました。 middlewareに書いた処理はリクエストが完了する前に実行されます。Cookieの値に応じてルーティングを振り分けたり、Basic認証を導入したり等など、幅広い用途で使えそうです。 VercelとNext.jsの組み合わせが強いのは、VercelにNext.jsをデプロイするとこのmiddleware部分をEdge Functionsで捌いてくれるという点です。つまり、静的なページに対するリクエストに対して、オリジンサーバーに触れことなくmiddlewareを実行できるということです。 Vercel以外のプラットフォームだとどうなのか ドキュメントには以下のような記載があります。 This works out of the box using next start, as well as on Edge
Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。 「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。 本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。 以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装されたアプリケーションは Vercel にデプロイしています。こちらからアクセ
Vercel はもっと薄く使える
はじめに Vercel Ship、アツい発表が続いていますね。 特に初日の Storage は、KV、Postgres、Blob と 3 つのプロダクトが公開され、「とりあえず何か試したい！」「今の構成のあのコンポーネントは Vercel で済ませられるようになりそう！」となった方も多いんじゃないでしょうか。 Vercel で何かしら関数を動かすとなった時に一番最初に思い付かれがちな選択肢は、とりあえず create-next-app して pages/api/hello.ts を作成して... というあれですが、Vercel を使ってみたい人（またはプロジェクト）のうち全員が React を使っているわけではありませんし、そもそもフロントエンド無しで完結するユースケースも多いはずです。 Vercel の Serverless Functions は（ご存知の方も多いと思いますが）実際には
How to choose the best rendering strategy for your app – Vercel
How to choose the best rendering strategy for your appOptimizing performance in the way you deliver code. Web rendering has evolved from simple server-rendered HTML pages to highly interactive and dynamic applications, and there are more ways than ever to present your app to users. Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regenerati
一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、技術的な知見を書きます🚀 About Me 株式会社ヘンリー でソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on GitHub @kohii00 on Twitter 作ったもの 説明 詳しい説明： サービスの詳しい紹介はこちらに書いたので読んでみてください 🙏 雑な説明： Moyuk は TypeScript で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。 技術的要素の概要 Moyuk には一般的なアプリケーション（データの出し入れやUIの描画など）としての要素に加えて、以下のような特徴的な要素があります。 ユーザーが書いた TypeS
GitHub - vercel/virtual-event-starter-kit: Open source demo that Next.js developers can clone, deploy, and fully customize for events.
This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features: Multiple stages - with the ability to add multiple sessions on each stage Each stage can be configured as - An embedded YouTube stream OR A live interactive audio-video experience powered by 100ms Sponsor expo, including individual virtual booths Career Fair
Next.js × NextAuth × Prisma × VercelPostgresで構築するモダン認証機能システム
はじめに 認証機能を一から作成したいと思い、Next.jsとNextAuthを使ったGithub認証機能の実装を行ったので、その手順を記事していきます。ユーザーデータ管理にPrismaを、データベースはVercelPostgresを使用しています。 ソースコード 実装したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回実装したバージョン情報のです。 next.js: v13.4.1 next-auth: v4.22.1 prisma/client: v4.14.1 vercel/postgres: v0.3.0 typescript: v5.0.4 技術詳細 Prisma PrismaはNode.jsとTypeScriptによる、オープンソースORM(Object Relational Mapping)です。SQL(select, insert, update, de
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
Next.js + Prisma + NextAuth.js + React Queryを試した - $shibayu36->blog;
2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。 shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。 やれたこと Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ 作業メモ prisma、migrationのツールも入ってるし便利すぎる。 migrationしたけどpsqlでdocker内にアクセスできなか
はじめに KODANSHAtechという会社でFRIDAYの開発案件に携わっています。 FRIDAYは講談社から発行されている写真週刊誌です。スクープ記事が注目されがちですがグラビアも多くやっており、撮影時の動画をウェブで提供しています。本記事では、FRIDAYにおける動画特典ページをNext.js ＋ Vercelでリプレースした事例を紹介します。 上記の画像はユーザーが動画を見るまでのフローを示したものです。ユーザーはFRIDAY紙面に掲載されたQRコードを読み込み、遷移先のページでパスワードを入力します。入力すると、動画を視聴できるようになります。 移行の経緯・技術選定 FRIDAYには古くから存在する月額課金のサービスが存在し、そのサービスに相乗りする形で紙面の動画特典ページを運用していました。しかし、サブスクリプションのサービスにリプレースしたタイミングで、動画特典ページを別アプ
How React 18 Improves Application PerformanceLearn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step
概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne
サービス概要 タイトル通り、現状はSoundCloudみたいに自分の作った曲を投稿できるサービスです。 現在実装されている機能は以下の通りです。 楽曲投稿 アルバム ランキング メッセージ（DM） フォローとフィード（タイムライン） いいねとブックマーク タグ・キーワードによる検索 このようにとりあえずSoundCloudのような楽曲投稿サービスとしての機能は最低限備えていますが、ゆくゆくはミュージシャンの活動拠点になることを目指しています。というのは、例えばYouTubeへの投稿や各種サブスク配信へのリンク、またライブなどイベントへの参加日程など、活動の実績/予定などがすべて1ページでわかるようにしたいと思っています。 また、ミュージシャン同士の交流/発見の場にしていきたいです。バンドメンバーや演奏を依頼する相手を見つけるのに適した場所はあまりありません（いわゆるメン募サイトは機能不全だ
ブログをAstroに移行した
ブログを Astro に移行した Astro とは Astro の公式サイトの説明を見てもらうのが早いかもしれない Astro is an all-in-one web framework for buildingfast, content-focusedwebsites. コンテンツ主体のウェブサイトを高速に作れるオールインワンウェブフレームワーク、という説明だが実際使ってみた感じ概ね合っていると思う. 特徴的なのが Astro で採用している Island Architecture と呼ばれるアーキテクチャで、UI の各コンポーネントを Island (島）のように見立ててそれぞれ独立したマイクロフロントエンドのように扱うことが出来る構成になっていること。 完全に Static な HTML とレンダリング後に Hydration (静的な HTML に後からイベントハンドラを設定)し
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
Issue VercelへのリクエストからServerless Functions が実行されると新規にDBに接続し、終了時にコネクションを切断する 一般的なコネクションプールを使ったアーキテクチャよりDB接続コストの影響を受ける Amazon RDS ProxyやCloud SQL Proxyのようなプラットフォームが提示する解決策がまだない
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } In this example, the useSWR hook accepts a key string and a fetcher function. key is a unique identifier of the data (normally the API URL) and will be passed to f
GitHub - honojs/hono: Web Framework built on Web Standards
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
at ジャムスタックチョットデキル!! シブヤ!! 大規模メディアにてOn-demand ISRとISRの費用対効果についてお話しさせていただきました。 ちょっと株式会社 https://chot-inc.com/ ジャムスタックチョットデキル!! シブヤ!! https://chot.connpass.com/event/272088/
Vercel Web Analyticsが正式機能に。Google Analyticsのようなサードパーティのスクリプトやクッキーによるトラッキングが不要
Vercel Web Analyticsが正式機能に。Google Analyticsのようなサードパーティのスクリプトやクッキーによるトラッキングが不要 Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、同社のホスティング環境で利用できるアクセス解析機能「Web Aanalytics」を正式版としてリリースすると発表しました。 Web Analytics: Privacy-friendly, first-party traffic insights. View top pages, referrers, user demographics, and more Track custom events to measure user actions Works with any frontend framework or <script>
はじめに 個人開発で使っていたのですが Gopher の集いにて Vercel で Go の開発ができることを話したら意外と知られていなかったのでご紹介します。 （貧乏エンジニアリングだと言って似たような記事を以前お見かけしていた場合、それはきっと私の残像が書いたものです。） Vercel とは いわゆる PaaS ( Platform as a Service ) です。 Vercel 社が Next.js を開発していることもあり、静的サイトや SPA ホスティングを簡単にできるサービスの印象が強いですが、 Functions や Postgres などを備えているのでサーバーの構築もできちゃいます。 Next.js のイメージから TypeScript と思われますが Go もデプロイできます。 準備 & version Vercel アカウントを作成します。 無料で使いたいので H
はじめに タイトルで大袈裟にZero API Web Applicationという名前をつけてしまいましたが、要するにNext.jsのversion13.4のServer ActionとReact Server Componentを活用してAPIを作らない・叩かないWeb Applicationを開発するというものです。 今回は趣味で作った麻雀のゲームを例に、Next.js@13.4でAPI要らずなアプリケーション開発及び、開発で得た知見を紹介できたらと思います。 補足ですが、今回開発したアプリケーションの概要としては、麻雀のさまざまな局面に応じて「あなたならどの牌を切る？」というアンケート型のゲームです。 話すこと 今回以下の二点に絞って知見を共有できたらと思います。 RSCとserver actionsでZero APIの実現 ファイルベースのOGP・favicon 成果物とその構成
Next.js 13.4
Next.js 13.4 is a foundational release, marking stability for the App Router: App Router (Stable): React Server Components Nested Routes & Layouts Simplified Data Fetching Streaming & Suspense Built-in SEO Support Turbopack (Beta): Your local dev server, faster and with improved stability Server Actions (Alpha): Mutate data on the server with zero client JavaScript Since the release of Next.js 13
The React ecosystem is a bustling landscape, brimming with frameworks promising to revolutionize web development. Today, we’ll be diving into two popular contenders: Next.js and Remix. Next.js is one of the most popular React frameworks used for server-side rendering. It’s been there for a significant time, and it provides an exceptional developer experience with all the features developers need.
GitHub - taubyte/tau: Open source distributed Platform as a Service (PaaS). A self-hosted Vercel / Netlify / Cloudflare alternative.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
https://serverless-frontend.connpass.com/event/279964/
SWR v2 をリリースしました
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
TechCrunch
“When an investor passes on you, they will not tell you the real reason,” said Tom Blomfield, group partner at Y Combinator. “At seed stage, frankly, no one knows what’s going
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
Edge Runtimeで遊んでみる
Edge Runtime が出た Vercelからいつの間にかEdge Runtimeなるものが出てたので、遊んでみた。 Web標準のAPIを使ったエッジ環境で動くアプリケーションの開発やテストを助けるツールキット。Edge環境はNode.jsじゃないし、evalが使えなかったりするので、それをシミュレートできる。 The Edge Runtime is a toolkit for developing, testing, and defining the runtime Web APIs for Edge infrastructure. 第一行目に「Vercel」とか「Next.js」の文字がないのがよい。とはいえ、一番の想定はVercelのEdge Functionsでしょう。 Edge Functionsってのは今のところ2つあるみたい。どちらもVercelもしくはNext.jsの機
過去のTweetsを全文検索できるmytweetsをBlueskyに対応した。自分用Twilogみたいなもの 以前TwitterのTwilogの代替えとして、mytweetsというツールキットを作りました。 自分のTweetsをインクリメンタル検索できるサービス作成キット と Tweetsをまとめて削除するツールを書いた | Web Scratch azu/mytweets: Search all your tweets. 今回、mytweetsをBlueskyにも対応させました。 合わせて、Vercelで動くようにしたりとか色々変更したので紹介します。 特徴 TwitterのTwitter archive dataをインポートできます 全部の履歴を取り込めます。 TwitterとBlueskyをサポートしています。 アーカイブからの差分をAPIを使って取得して、常に全部のTweetsをま
Next.jsのIncremental Static RegenerationをVercel以外でやってみる - Sweet Escape
本記事はNext.js Advent Calendar 2020の9日目です。 tl;dr Vercel以外でもIncremental Static Regenerationは可能 試した範囲ではフルに機能するのはコンテナで動かした場合のみ AWSのサーバーレスで動かすのは現時点で絶望的 はじめに 早速ですが、みなさん、次世代のStatic Site Generation（SSG）と言っても過言ではないIncremental Static Regeneration（ISR）はご存知でしょうか。 一応知らない人のためにすごく簡単に説明をすると、『リクエストに対して静的にビルドされたページを返しつつ、有効期限が過ぎたら非同期で静的ページの再生成をSSRで行う』っていうものです。Cache Controlにおけるstale-while-revalidateと同じような考え方が適用されたものとも言
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why I'm Using Next.js
Next.jsのISRで動的コンテンツをキャッシュするときの戦略
Vercel の料金形態と内容についてまとめた - 2020冬
Spotify API + Next.jsで作る選曲支援Webアプリ - Qiita
Next.jsのmiddlewareはVercel以外でも問題なく使えるか
React アプリに Auth0 でシュッと認証を組み込んで Vercel に爆速デプロイする - Qiita
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術
週刊誌の動画特典ページをNext.js + Vercelで構築した話
How React 18 Improves Application Performance – Vercel
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
SoundCloudみたいなサービスを個人で開発した
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
VercelからMySQL/PostgreSQLに接続したい場合にどういうアーキテクチャにするのが最適か
React Hooks for Data Fetching – SWR
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
Vercel に Go サーバーを無料でデプロイできるんです！
【PHPと一緒だなんて言わないで】Next.js@13.4によるZero API Web Application
Next.js vs. Remix - A Developer's Dilemma
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
過去のTweetsを全文検索できるmytweetsをBlueskyに対応した。自分用Twilogみたいなもの