フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
基礎から学ぶNext.js
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て - LIVESENSE ENGINEER BLOG
これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドはReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエンドのサービス群とAPI通信する構成をとっています。 サービスの性質上口コミを中心とした検索流入が重要であり、SEOの文脈でフロントエンドのパフォーマンス改善の必要性は認識されていましたが、機能開発や負債解消もあり、まとまった対応ができない状況が続いていました。 この状況を改善すべく、1年間継続的に改善に取り組み、Web Vitalsの健全化、パフォーマンススコアの大幅な改善を達成することができました。 本記事では、特に効果が大きかった改善
Next.js + TypeScriptにStorybookを導入して遭遇したエラーを全て共有します - パンダのプログラミングブログ
Next.jsにStorybookを導入してTypeScriptで書けるようにする この記事では、Next.jsにStorybookを導入してTypeScriptでReactコンポーネントを書けるようにする手順を紹介します。またその際に、私が踏み抜いたバグと解消法を全て共有します。 Next.jsとは、Vercelが作成しているReactのフレームワークです。 SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。また、面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にWebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。 Storybookとは、UIコンポーネントのカタログを作るツールです。 Storybookの実行環境はメイ
Next.jsでStorageオブジェクトを使う | みどりのさるのエンジニア
Next.jsでブラウザの Storage オブジェクト を使う時の対応策をまとめています。 参考実装は t-yng/examples/nextjs-localstorage を参照してください。 Storage オブジェクトを使ってみる sessionStorage からユーザー情報を取得して画面に表示する例を考えてみます。 // hooks/useUser.ts import { useState } from "react"; import { User } from "../interfaces"; const readUser = (): User | undefined => { const user = sessionStorage.getItem("user"); return user != null ? JSON.parse(user) : undefined; };
Next.jsでGoogle Analyticsを使えるようにする - パンダのプログラミングブログ
**Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになってます。 私は実務でNext.jsを使っており、このフレームワークはとても便利だと思っています。私はNext.jsの大ファンなので、Reactでの開発時にNext.jsを使う現場が増えるといいなと思って記事を書いています。 関連記事: Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する **この記事では、Next.jsでReactアプリケーションを作成する時に、
【Next.js】Warning: X did not match.Server: y Client: z は絶対に解消しろ - Qiita
【Next.js】Warning: X did not match.Server: y Client: z は絶対に解消しろReactNext.js 追記 (2022/04/19) React18より、この記事で解説している内容はワーニングからエラーへ引き上げられました。 この記事で解説しているのは、React17の頃にワーニングレベルであったこの警告を「なぜ放置してはいけないか」ということについてです。 残念ながら 「どうやって解消すべきか」については触れていません ので、問題解決を急ぎたい方は、今すぐこの記事を閉じて他の記事を探してください。 結論 パフォーマンスに与える影響が非常に大きい。 「コンソールにワーニング出てるけど、レンダリングされる結果は問題ないからいいか」ぐらいの軽い気持ちで無視すると痛い目を見る Warning解消前 Warning解消後
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js App Router Training
Next.js App Router での MPA フロントエンド刷新