クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ
こんにちは。レシピ事業部のkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、この新システムのCSS in JSをEmotionからゼロランタイムのvanilla-extractへ変更した話です。 vanilla-extract.style 背景 以前書いた レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログでは、CSS in JSライブラリとして Emotion（@emotion/react）を採用した経緯と開発環境整備を紹介しました。採用理由としては以下の通りでした。 セレクタに一意なIDが割り振られるので、スタイルを適用した要
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
Next.js 12について本気出して和訳してみた
Next.js 12について本気出して和訳してみた Next.js 12がリリースされました！！！🎉 公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。 公式ページは以下となっております。 英語が苦手な方はこの記事を参考にしてください！！！ ※本記事で使用している画像は公式ページのものです。 Next.js 12 2021年10月27日(水) Next.js Confで発表したように、Next.js 12は過去最大のリリースとなります。 Rustコンパイラー: Fast Refreshが3倍、そしてビルドが5倍速くなりました。 ミドルウェア(beta): Next.jsの柔軟性を高めるために、設定よりもコードを優先します。 React 18のサポート: ネイティブのNext.jsのAPIがサポートされ、サスペンスもサポートされています。 <Image /
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
なぜNext.jsを選んだのか？ DMMのサービスを支えるフロントエンド技術の今
2018年11月13日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情」。規模や業務内容が異なるWebサービスを提供する3社が一堂に会して、プレゼンテーションとパネルディスカッションを通して、お互いの知見を共有しました。プレゼンテーション「DMMのサービスを支える最近のフロントエンド技術 ~ next.js の実践利用」に登場したのは。合同会社DMM.com、Webエンジニアの千葉弘太郎氏。DMMの現在の技術スタックから、新たに採用した技術の選定理由を解説します。 DMMのサービスを支える最近のフロントエンド技術 千葉弘太郎氏（以下、千葉）：こんばんは。長丁場になりますが、最後までお付き合いください。DMMからは「DMMのサービスを支える最近のフロントエンド技術」という
クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog
前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として
Docker + Next.jsでつくったウェブサイトをWerckerで雑にデプロイ自動化してみた - Kenta Katoh's Blog
Kenta Katoh's Blog 駒沢より Docker + Next.jsでつくったウェブサイトをWerckerで雑にデプロイ自動化してみた May 15, 2017 安いIDCFクラウドでSSR用のNodeサーバーを立てて実験/運用してみようと思ったので、デプロイを自動化してみた。 一番お手軽に作れそうなのでNext.js + Dockerでやってみる。(Next.jsは今回は触れない) とにかくいろいろ気にせず、「とりあえず動く」ところまで持っていく。 事前準備 VPSにDockerとdocker-composeいれておく。 今回VPSはCentOS7.2が入ってます。 やる 起動スクリプトが package.json "scripts" : { "dev" : "next" , "build" : "next build" , "start" : "NODE_ENV=produ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
