fastly/next-compute-jsの内部アーキテクチャを調べる
Fastlyから新たなNext.jsインテグレーションツールがリリースされていたので調べてみた。 モチベーションとしてはServerless Nextjs Pluginに移植してCloudflare Workersでも動かしたい。 fastly/next-compute-jsとは Compute@Edge でNext.jsアプリケーションを動かしたい時に使うツール。 以下に解説がある 使い方 Next.jsプロジェクトを作成 npx @fastly/next-compute-js@latest init でサブディレクトリcompute-js以下にCompute@Edge固有の構成を追加する fastly compute serve でローカルで起動する fastly compute publish でデプロイする compute-jsに何ができるのか WebpackとFastly CLI
Fastly で Next.js アプリケーションを実行
Fastly の新しい next-compute-js ライブラリを使用することで、Compute@Edge プラットフォーム上で Next.js アプリケーションをホストできるようになりました。これにより、Next.js 開発者のエクスペリエンスが向上し、圧倒的なスピードを誇る Fastly のグローバルエッジネットワークのメリットが得られます。オリジンサーバーも必要ありません。 Next.js は広く普及している JavaScript ベースのサーバーフレームワークで、開発者に優れたエクスペリエンスを提供します。具体的には、フロントエンドのコードを React で作成できるほか、ごくわずかな設定で本番環境に必要な優れた機能 (ハイブリッドの静的レンダリングとサーバーレンダリング、スマートバンドル、ルートプリフェッチなど) を直感的にセットアップできる便利さを備えています。 Next.j
AWSを用いたフロントエンドモニタリング入門 ~Next.js編~ - ウェルスナビ開発者ブログ
こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です. 今回のテーマはフロントエンドモニタリングです。 みなさんフロントエンドのモニタリングは正しく行えているでしょうか？ 各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！ フロントエンドの「何を」モニタリングするのか？ ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。 本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。 ユーザの端末内で発生したエラーを正しく検知できているか？ レンダリングサーバで発生したエラー
RubyKaigi2022スケジュールアプリ、フロントをNext.jsに移行してみてわかったこと - SmartHR Tech Blog
こんにちは、開発者のkinoppydです。こんにちは。 SmartHRでは、去年から引き続きRubyKaigiにスケジュールアプリを提供しています。事前にRubyKaigiスケジュールから「拙者のセットリスト」を作成してもらい、SNSで他の参加者とシェアして楽しんでもらうことを目的にしています。 これが今年のワイのセトリや！https://t.co/vZ3nGrPlCt #rubykaigi— kinoppyd (@GhostBrain) 2022年9月1日 去年のソースコードを利用しつつ、今年は新しいチャレンジとしてフロントの環境をNext.jsに移行してみようと考えました。去年の時点で、フロントはほぼReactで書かれており、helperという名の実質APIも書かれていたので、そんなに大きな手間にはならないだろうと思いましたが、とはいえ色々と起こったのでその様子をお伝えしたいと思います
Next.js Layouts RFC in 5 minutes – Vercel
The Next.js team at Vercel released the Layouts RFC a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. The RFC is detailed and covers both basic and advanced features. This post will cover the most important features of the upcoming Next.js changes landing in the next major version that you should be aware of. Creating RoutesIn the new app
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
React開発を快適にするChrome拡張を公開したので見てください！
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
Next.js 12.2以降では keepAliveTimeout が設定できる - stefafafan の fa は3つです
Node.jsのkeepAliveTimeoutのデフォルト値が5秒で、Next.jsからこれが操作できなくて不便という話題が Next.js 12.1以前までありました。この値を調整したい場合はパッチを当てるなどして対応する必要があるようでした。 zenn.dev この件について議論元のDiscussionやissueなどをみていくとどうやらもう以下のPull Requestによって外からオプションを与えられる状態になっているようです。 github.com Next.js 12.2.0 にこの変更が入っているので、 next start --keepAliveTimeout 70000 みたいなことをやりたくなったらまずNext.jsのバージョンを上げると良さそうです。 github.com
Next.jsでkeepAliveTimeoutを設定する
2022/09/06 追記 Next.js v12.2以降では本記事の対処が不要になりました。詳細はコメントをご覧ください。 https://zenn.dev/link/comments/83306d9bb57eb9 Client -> AWS ALB -> Node.js 構成をとった場合、稀にALBが502を返す場合があります。 これは、Node.jsのkeepAliveTimeoutのデフォルト値が5秒[1]であり、ALBのConnection idle timeoutのデフォルト値が60秒[2]であることによって引き起こされます。 この問題の詳細はこちらの記事が詳しいです。 問題点 Next.jsでも上記の問題が発生するのですが、厄介なのはkeepAliveTimeout値を変更する方法が提供されていないことです。 例外的に、Custom Serverを利用すればkeepAlive
pixivをNext.jsでリプレイスする取り組みをご紹介します。 - pixiv inside
pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu: pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実装を担当しています。 shu: 2022年3月に入社したshuです。Next.js化ではフロントエンドの設計、実装を担当しています。 mog: エンジニアとしてアルバイトをしているmogです。Nex
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
next.jsでモノレポツールを入れずに複数のサービス起動出来るようにしたい
next.jsで同じリポジトリを使いつつ複数の別なアプリケーションとして起動したいケースが度々有る。 この場合、殆どはturborepoやnxなどのmonorepoツールを利用する方法が広く知られている。 next.jsの公式でもMulti zoneの例ではmonorepoが利用されている 一方でmonorepoは各所対応してない場合があったり気を使う部分も多く、一定の覚悟を必要になる 今回モノレポツールを使わない、もう少しライトな方法を2つ思いついたのでそれぞれまとめていきたい ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える webpackの設定を調整して依存関係を解決させる 1. ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える こちらはnextのレールからほぼ外れないのでそれほど覚悟を必要としないやり方。 デメリットとしてURLにディレクトリが含まれ
Next.js 12.2
We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements
私のフロントエンドディレクトリ構成・テスト観点 2022
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
Next.jsキャッシュ戦略はこんな感じで行こうと思う - koudenpaのブログ
Next.js セカンドインプレッション - koudenpaのブログで、書いた通りNext.jsとはしっかり付き合いはじめて日が浅いのだけれど、横目で眺めていた時期と主体的に触って感じたことからどういう構成をとるのかの考えが固まってきたので書いておく。 暫くたって見直して「とんちんかんなことを考えていたな」となるのも一興。 なお、「こんな感じで行こう」の対象は本業ではなくプライベートです。 考え方 目的 ポリシー 構成 ポリシー 最新情報を表示する需要への対応 想定AWS構成 感想 考え方 目的 ユーザーの体感速度向上 システムへの負荷低減≒ホスティングコスト低減 JavaScriptを処理しないクローラへのコンテンツ提供 この辺は当たり前のことではあるけれど、目的を見失わないように何を考えてキャッシュするのかは考えておきたい。 ポリシー キャッシュはシンプルに構成する Amazonのよ
Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする
module.exports = { - experimental: { - outputStandalone: true, - }, + output: 'standalone', } Next.js の experimental features のひとつに、スタンドアロンモードがあります。 通常モードでは、本番リリース可能なビルドを用意する場合、yarn build による .next/ ディレクトリとあわせて node_modules も含めます。依存関係を解決するために必要ですね。一方スタンドアロンモードを有効にした上で yarn build するとビルド結果が異なります。.next/ディレクトリが作られる点は同じですが、そこにstandaloneディレクトリが追加されます。ここにはアプリを動かすためのファイルが依存関係も含めてすべて入っていて、.next/standalone/
next/imageを使ってビルド時に画像を最適化する方法
はじめに 2022 年 5 月現在、next/image を next export で使う場合、 画像プロバイダーを使って外部 URL を利用する方法しかありません。 (next/image のデフォルトは、Nodejs サーバーを使用した画像最適化 API のもと行われるため) しかし、シンプルなウェブサイトを構築する場合や Node.js サーバーを使用せずに構築したい場合にこれは不便です。 よってこの問題を解決するためのライブラリを開発しました。 next/image を使ってビルド時に画像を最適化するソリューションをお探しの方はこちらをぜひお使いください！ GitHub ドキュメントサイト 特徴 主な特徴としまして、以下があります。 ビルド時に画像を最適化 next/image の全オプションが利用可能 拡張子の変換が可能 sharp を使用し高速に動作 キャッシュにより同じ最適
Remixの凄みを紹介したい
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
Layouts RFC
This RFC (Request for Comment) outlines the biggest update to Next.js since it was introduced in 2016: Nested Layouts: Build complex applications with nested routes. Designed for Server Components: Optimized for subtree navigation. Improved Data Fetching: Fetch in layouts while avoiding waterfalls. Using React 18 Features: Streaming, Transitions, and Suspense. Client and Server Routing: Server-cen
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
