BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
ReactのコンポーネントからStorybookのファイルを自動生成してみた
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
【Next.js】実務でapp routerに移行した所感
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
React マークダウンを HTML 変換するライブラリ試してみた - かもメモ
マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-parse が圧倒的に多く使われている 最終更新は markdown-it > remark (remark-parse) > marked の順 marked は利用数は多いのですが最終アップデートが 11 年前なので、Markdown-it と Remark で検討することにしました Markdown-it Remark Project JavaScript TypeScript Star 14.5k 5.8k Last publish 7 months ago a yea
Next.jsの新常識「App Router」を学ぼう！
Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ
Next.js 13.4まとめ
基本的には以下のNext.js 13.4のブログを翻訳してまとめたものになります。 TL;DR Appルーター(安定版): サーバーコンポーネント ネストされたルート&レイアウト 簡略化されたデータ取得 ストリーミング&サスペンス ビルトインSEO対応 Turbopack(ベータ版): より速く、安定性が改善されたローカル開発サーバー サーバーアクション(アルファ版): ゼロクライアントJavaScriptでサーバーのデータを更新 半年前にNext.js 13でベータ版としてAppルーターがリリースされましたが、今回ついに安定版となりました(開発スピードが速すぎる…)。 アップデート詳細 Next.js Appルーター 今回のアップデートでは特に新機能の追加はありませんが、安定版となりました。 しかし、Appルーターは2016年にNext.jsをリリースして以来の新時代の始まりを告げる、エ
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
Reactでテキスト量に応じて高さを自動で調整するtextareaを作る 📝 - みかづきブログ・カスタム
結論 自作編 基本的な方針 JavaScript（抜粋） DEMO 応用的な方針 JavaScript（抜粋） DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。 github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする textareaのscrollHeightを計測する textareaのheightにscrollHeightを代入する textareaの初期値がautoであれば上記方針で基本的には問題ないです。 JavaScript（抜粋） const TextArea = () => { const [ value, setValue ] = React.useState(''); const [ height, setHeight ] = React.useS
Next.js + TypeScriptで簡単なSEO対策をしてみる
概要 Next.js + TypeScriptプロジェクトで出来る超シンプルなSEO対策をご紹介します。 デプロイ先はVercelとなります。 今回は、Open Graph Protocolを利用してSNSでシェアするときに画像付きに出来てリッチな感じに出来るようになりましょうの回です。 SEO対策は多岐に渡り、飛びつける最適解がないので迷いますよね・・・・(´･ω･`) SEOとは Search Engine Optimization(検索エンジン最適化)の略称になります。 Webサイトを上位表示させる為に不可欠な項目です。 Open Graph Protocolとは Open GraphはFacebookによって作成されたプロトコルです。 Open Graphを使用すると、Webページのコンテンツを最適化して、ユーザーがメインのソーシャルネットワークFacebook、Twitter、L
Next.js 13.2
Back to BlogThursday, February 23rd 2023 Next.js 13.2Posted by Next.js 13.2 includes major improvements to the App Router (app) in preparation for stability: Built-in SEO Support: New Metadata API to set static and dynamic meta tags. Route Handlers: Custom request handlers, built on Web Request and Response. MDX for Server Components: Use React components inside Markdown, server-side only. Rust MD
Next.js 13 和訳
雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 app/ Directory (beta): より簡単に、より速く、クライアント側JSのサイズをより小さく。 Layouts React Server Components Streaming Turbopack (alpha): Rustで実装したWebpackの代替バンドラーで最大700倍高速化。 New next/image (stable): ネイティブブラウザの遅延ロードを利用し、より高速に。 New @next/font (beta): レイアウトシフトをゼロにする自動セルフホストフォント。 Improved next/link: APIを簡素化し、<a>タグを自動的に表示するようにしました。 次のコマンドを利用して更新出来ます。 app/ Directory (beta) Next.jsで最も愛されている機能の
Next.jsを使ってCloud FunctionsとFirebase HostingでSSRする - Qiita
Next.js 9を使ってCloud FunctionsとFirebase HostingでSSRする 皆さんこんにちは、noriです。 FirebaseSummitのレジストレーションがオープンしましたね。僕は今年も参加しますよ！! 今年はスペインの開催ですねー 楽しみ。 最近フロントの環境設定をする機会があったので、登場したばかりのNext.js 9をCloud Functionsにのせてみました。 Cloud Functionsにのせるところまでは、すぐだったんですがReactの扱いが初めてだった僕にとってつまりどころがあったので、同じことをしようとしている人たちのためにこの記事を書くことにしました。 先にサンプルコードを置いておきます。 Firebase HostingとしてNext.jsを動かす まず今回やったことを図として示します。 ポイントは以下の2つです。 Next.jsを
Next.jsで整える。デザインとロジックの分離
先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます
Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）
初めに 最近自分がNext.jsをやる案件がとにかく増え、ディレクトリ構成が固まってきたのでここに置いておきます。 何か意見あれば是非いただけると嬉しいです。 個人的に最近流行りのfeaturesはやりすぎだと思っていたのですが、結局開発していくとfeaturesのようなディレクトリを切った方が合理的な場面が多々出てきたのでこうなった次第です。 設計時に参考にした記事 こちらのReact TypeScript Cheatsheetに、Recommendationとして載っているbulletproof-reactを参考にしました。 構成 例として飲食店のウェブサイトで、コース（course）という機能を持たせるとする。 ├─ components/ │ ├─ elements/ │ │ └─ Button │ │ ├─ Button.stories.tsx │ │ └─ Button.tsx
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング
React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事では Concurrent Features のひとつであるstartTransitionと、それを使いこなす上で重要な概念である「トランジション」について説明する。 この記事ではコンセプトの説明や具体例の提示のみを行う。詳細を知りたい場合は以下を参照。 一年前の記事であるため古くなっている部分もあるが、根幹は大きく変わっていないと認識している。 なお、上記の記事には「Concurrent Mode」という用語がタイトルに入っているが、これは今後は使われなくなってい
Next.jsで多言語対応のサイトを作るのが簡単すぎた件
Next.jsで多言語対応を試みた経緯 以前趣味でブログのRSSを登録するとブログの投稿率をGitHubの草のようなヒートマップ形式で表示でき他のユーザーと継続率を競えるサービス、Blog Friendsを開発しました。 今回のこのサービスをProductHunt（海外の自分が作ったWebサービスやアプリを投稿できるサイト）に提出しようと思い英語対応をしました。 日本語サイトがこちらで、 英語サイトはこちらです。 ProductHuntに提出してみた結果は以下のように12Upvotedでなんとも言えない結果でしたが、多言語サイトを作る上で勉強になったので後悔はしていません。 Next.jsで多言語サイトを作る方法 ルーティングを理解する 公式サイトにもあるのですが、Next.jsで多言語サイトを作る方法として以下の二つのルーティング方法があります。 Domain Routing Sub-p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsにTailwind CSSを導入する
